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" %>
<html>
<head>
<title>Title</title>
<!--加载jQuery文件-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<select name="province" id="province">
<option value="0">请选择</option>
</select>省
<select name="city" id="city">
<option value="0">请选择</option>
</select>市
<select name="area" id="area">
<option value="0">请选择</option>
</select>区/县
<!--获取所有的省-->
<script>
$(function () {
$.ajax({
type:"get",
url:"findProvince",
dataType:"json",
success:function (data) {
var pro = $("#province");
for(var i=0;i<data.length;i++){
var opt="<option value='"+data[i].pid+"'>"+data[i].pname+"</option>"
pro.append(opt)
}
}
})
})
</script>
<script>
<!--获取所有的市-->
function find() {
$(function () {
$("#city option").remove();
$.ajax({
type:"get",
async:false,
url:"findCity?pid="+$("#province").val(),
dataType:"json",
success:function (data) {
if(data==""){
$("#city").html("<option>请选择</option>")
}
var city=$("#city")
for (var i=0;i<data.length;i++){
var ob="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>"
city.append(ob)
}
}
})
})
}
<!--获取所有的区或县-->
function find1() {
$(function () {
$("#area option").remove()
$.ajax({
type:"get",
async:false,
url:"findArea?cid="+$("#city").val(),
dataType:"json",
success:function (data) {
var area=$("#area")
for(var i=0;i<data.length;i++){
var ar="<option value='"+data[i].aid+"'>"+data[i].aname+"</option>"
area.append(ar)
}
}
})
})
}
<!--重新调用上面的函数-->
$("#province").change(function () {
find();
find1()
})
$("#city").change(function () {
find1();
})
</script>
</body>
</html>
前端页面运行结果：
3，查找所有的省
3.1 接口
package cn.tb.dom;
import cn.tb.entity.Province;
import java.util.List;
public interface ProvinceDom {
public List<Province> 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<Province> findProvince() {
Connection conn = DBHelper.getConn();
List<Province> 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<Province> 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<City> 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<City> findCity(int pid) {
Connection conn = DBHelper.getConn();
List<City> 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<City> 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<Area> 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<Area> findArea(int cid) {
Connection conn = DBHelper.getConn();
List<Area> 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<Area> 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);
}
}
三，整体运行结果
选择省，会自动显示该省对应的市和区（县），改变市会显示该市对应的区（县）
