本文共 10607 字，大约阅读时间需要 35 分钟。

jQuery+ajax实现省市区（县）下拉框三级联动

一，首先创建数据库

为数据表添加数据 省级表 市级表 区（县）级表 二，代码实现 首先是我的项目结构 1，创建实体类和工具类 省实体类

package cn.tb.entity;public class Province {
       private int pid;    private String pname;    public int getPid() {
           return pid;    }    public void setPid(int pid) {
           this.pid = pid;    }    public String getPname() {
           return pname;    }    public void setPname(String pname) {
           this.pname = pname;    }    public Province(int pid, String pname) {
           this.pid = pid;        this.pname = pname;    }    public Province() {
       }    @Override    public String toString() {
           return "Province{" + "pid=" + pid + ", pname='" + pname + '\'' + '}';    }}

市实体类

package cn.tb.entity;public class City {
       private int cid;    private String cname;    private int pid;    public int getCid() {
           return cid;    }    public void setCid(int cid) {
           this.cid = cid;    }    public String getCname() {
           return cname;    }    public void setCname(String cname) {
           this.cname = cname;    }    public int getPid() {
           return pid;    }    public void setPid(int pid) {
           this.pid = pid;    }    public City(int cid, String cname, int pid) {
           this.cid = cid;        this.cname = cname;        this.pid = pid;    }    public City() {
       }    @Override    public String toString() {
           return "City{" + "cid=" + cid + ", cname='" + cname + '\'' + ", pid=" + pid + '}';    }}

区（县）实体类

package cn.tb.entity;public class Area {
       private int aid;    private String aname;    private int cid;    public int getAid() {
           return aid;    }    public void setAid(int aid) {
           this.aid = aid;    }    public String getAname() {
           return aname;    }    public void setAname(String aname) {
           this.aname = aname;    }    public int getCid() {
           return cid;    }    public void setCid(int cid) {
           this.cid = cid;    }    public Area(int aid, String aname, int cid) {
           this.aid = aid;        this.aname = aname;        this.cid = cid;    }    public Area() {
       }    @Override    public String toString() {
           return "Area{" + "aid=" + aid + ", aname='" + aname + '\'' + ", cid=" + cid + '}';    }}

工具类 用于连接数据库

package cn.dbhelper;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;public class DBHelper {
       //获取数据库连接     jqueryajaxdemo数据库名称    public static final String URL="jdbc:mysql://localhost:3306/jqueryajaxdemo?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC";    //获取数据库账号    public static final String NAME="root";    //获取数据库连接    public static final String PWD="root";    //加载驱动    public static Connection conn;    public static Connection getConn(){
           try {
               Class.forName("com.mysql.jdbc.Driver");            try {
                   conn = DriverManager.getConnection(URL,NAME,PWD);            } catch (SQLException e) {
                   e.printStackTrace();            }        } catch (ClassNotFoundException e) {
               e.printStackTrace();        }        return conn;    }    //关闭数据库连接    public static void realease(Connection conn){
           if (conn!=null){
               try {
                   conn.close();            } catch (SQLException e) {
                   e.printStackTrace();            }        }    }    //测试连接    public static void main(String[] args) {
           System.out.println(DBHelper.getConn());    }}

2，前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>        
           请选择省    请选择市    请选择区/县
   

前端页面运行结果：

3，查找所有的省 3.1 接口

package cn.tb.dom;import cn.tb.entity.Province;import java.util.List;public interface ProvinceDom {
       public List
   
     findProvince();}
   

3.2 接口实现类

package cn.tb.dom.impl;import cn.dbhelper.DBHelper;import cn.tb.dom.ProvinceDom;import cn.tb.entity.Province;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;public class ProvinceImpl implements ProvinceDom{
       @Override    public List
   
     findProvince() {
           Connection conn = DBHelper.getConn();        List
    
      provinceList = new ArrayList<>();        String sql="select * from province";        try {
               PreparedStatement ps = conn.prepareStatement(sql);            ResultSet rs = ps.executeQuery();            while (rs.next()){
                   Province province = new Province();                province.setPid(rs.getInt(1));                province.setPname(rs.getString(2));                provinceList.add(province);            }        } catch (SQLException e) {
               e.printStackTrace();        }        return provinceList;    }}
    
   

3.3 servlet 类

package cn.tb.servlet;import cn.tb.dom.ProvinceDom;import cn.tb.dom.impl.ProvinceImpl;import cn.tb.entity.Province;import com.alibaba.fastjson.JSONObject;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;@WebServlet("/findProvince")public class ProvinceServlet extends HttpServlet {
       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        ProvinceDom provinceDom = new ProvinceImpl();        List
   
     list = provinceDom.findProvince();        response.getWriter().write(JSONObject.toJSONString(list));    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           this.doPost(request, response);    }}
   

4，查找所有的市

4.1 接口

package cn.tb.dom;import cn.tb.entity.City;import java.util.List;public interface CityDom {
       public List
   
     findCity(int pid);}
   

4.2 接口实现类

package cn.tb.dom.impl;import cn.dbhelper.DBHelper;import cn.tb.dom.CityDom;import cn.tb.entity.City;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;public class CityImpl implements CityDom{
       @Override    public List
   
     findCity(int pid) {
           Connection conn = DBHelper.getConn();        List
    
      cityList = new ArrayList<>();        String sql="select * from city where pid=?";        try {
               PreparedStatement ps = conn.prepareStatement(sql);            ps.setInt(1,pid);            ResultSet rs = ps.executeQuery();            while (rs.next()){
                   City city = new City();                city.setCid(rs.getInt(1));                city.setCname(rs.getString(2));                city.setPid(rs.getInt(3));                cityList.add(city);            }        } catch (SQLException e) {
               e.printStackTrace();        }        return cityList;    }}
    
   

4.3 servlet类

package cn.tb.servlet;import cn.tb.dom.CityDom;import cn.tb.dom.impl.CityImpl;import cn.tb.entity.City;import com.alibaba.fastjson.JSONObject;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;@WebServlet("/findCity")public class CityServlet extends HttpServlet {
       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        String pid = request.getParameter("pid");        CityDom cityDom = new CityImpl();        List
   
     cities = cityDom.findCity(Integer.parseInt(pid));        response.getWriter().write(JSONObject.toJSONString(cities));    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           this.doPost(request, response);    }}
   

5，查找所有的区（县）

5.1 接口

package cn.tb.dom;import cn.tb.entity.Area;import java.util.List;public interface AreaDom {
       public List findArea(int cid);}

5.2 接口实现类

package cn.tb.dom.impl;import cn.dbhelper.DBHelper;import cn.tb.dom.AreaDom;import cn.tb.entity.Area;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;public class AreaImpl implements AreaDom{
       @Override    public List findArea(int cid) {
           Connection conn = DBHelper.getConn();        List areaList = new ArrayList<>();        String sql="select * from area where cid=?";        try {
               PreparedStatement ps = conn.prepareStatement(sql);            ps.setInt(1,cid);            ResultSet rs = ps.executeQuery();            while (rs.next()){
                   Area area = new Area();                area.setAid(rs.getInt(1));                area.setAname(rs.getString(2));                area.setCid(rs.getInt(3));                areaList.add(area);            }        } catch (SQLException e) {
               e.printStackTrace();        }        return areaList;    }}

5.3 servlet类

package cn.tb.servlet;import cn.tb.dom.AreaDom;import cn.tb.dom.impl.AreaImpl;import cn.tb.entity.Area;import com.alibaba.fastjson.JSONObject;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List;@WebServlet("/findArea")public class AreaServlet extends HttpServlet {
       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=utf-8");        String cid = request.getParameter("cid");        AreaDom areaDom = new AreaImpl();        List areas = areaDom.findArea(Integer.parseInt(cid));        response.getWriter().write(JSONObject.toJSONString(areas));    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           this.doPost(request, response);    }}

三，整体运行结果

选择省，会自动显示该省对应的市和区（县），改变市会显示该市对应的区（县）

转载地址：http://bcqai.baihongyu.com/