获取动态数据用jquery、ajax等实现省市县的三级级联

省市县三级级联的效果

1. 页面加载时，三个级别的select值均为默认值；

2.只有从后台获取第一级select（省）的数据，第二级select（市）的选项数据根据第一级select（省）值的改变再动态更新出现对应的市，第三级select（县）的选项数据再根据第二级select（市）值的改变再做动态更新出现对应的县；

jsp页面的实现（用$.ajax()异步方法请求后台数据，然后通过JSON将数据添加到select选项中）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Insert title here</title>
		<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
		<!--定义一个 getProvinces()函数用异步的方式获取省份信息 -->
			function getProvinces() {
				var object ={
						url:"./AddressServlet",//获取所有的省份信息
						type:"get",
						dataType:"json",//通过json来传输数据
						success:function(data){
							var options = "<option>---请选择省份---</option>";//定义一个初始显示的信息
                            <!--通过for循环遍历数据库中的所有省份 -->
							for(var i = 0 ;i<data.length;++i){
								var province = data[i];
								options = options +"<option value=\""+province.code+"\">"+province.name+"</option>"
							}
							console.log(options);
							$("#province").empty();//清空之前所选择的省份信息
							$("#province").append(options);//进行拼接
						}
				};
				$.ajax(object);
			}
			<!--定义一个 getCities()函数用异步的方式获取市信息 -->
			function getCities() {
				var provinceCode = $("#province option:selected").val();
				$("#country").empty();//更改省、市的内容后，清空县级的信息
				$("#country").append($("<option>---请选择县/区---</option>"));
				var object ={
						url:"./AddressServlet?parentCode="+provinceCode,//根据省份信息获取相应的市的信息
						type:"get",
						dataType:"json",
						success:function(data){
							var options = "<option>---请选择市---</option>"
							for(var i = 0 ;i<data.length;++i){
								var province = data[i];
								options = options +"<option value=\""+province.code+"\">"+province.name+"</option>"
							}
							console.log(options);//用来输出信息，便于调试
							$("#city").empty();
							$("#city").append(options);
						}
				};
				$.ajax(object);
			}
			<!--定义一个 getCountries()函数用异步的方式获取县信息 -->
			function getCountries() {
				var cityCode = $("#city option:selected").val();
				var object ={
						url:"./AddressServlet?parentCode="+cityCode,//根据所选的市获取所对应的县的信息
						type:"get",
						dataType:"json",
						success:function(data){
							var options = "<option>---请选择县/区---</option>"
							
							for(var i = 0 ;i<data.length;++i){
								var province = data[i];
								options = options +"<option value=\""+province.code+"\">"+province.name+"</option>"
							}
							console.log(options);
							$("#country").empty();
							$("#country").append(options);
						}
				};
				$.ajax(object);
			}
		</script>
	</head>
	<body onload="getProvinces()">
		省：
		<select  style="width:130px" id="province" onchange="getCities()">
			<option>---请选择省---</option>
		</select>
		<br/>
		市：
		<select  style="width:130px" id="city" onchange="getCountries()" >
			<option>---请选择市---</option>
		</select>
		<br/>
		县：
		<select  style="width:130px" id="country" >
			<option>---请选择县---</option>
		</select>
	</body>
</html>

后端的实现

1.在vo类中创建一个Address.java

package com.jd.address.vo;

public class Address {
	private String name;
	private String code;
	
	public Address(String name, String code) {
		this.name = name;
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	
}

2.在util类中创建一个数据库操作工具DBDao.java

package com.jd.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

//数据库操作工具
public class DBDao {

	private static final String DB_URL = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false";
	private static final String DB_DRIVER = "com.mysql.jdbc.Driver";
	private static final String DB_USERNAME = "root";
	private static final String DB_PASSWD = "1234";
	
	static {
		try {
			Class.forName(DB_DRIVER);
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
	}
	
	 //获取数据库链接
	public static Connection getDBConn() {
		try {
			return DriverManager.getConnection(DB_URL, DB_USERNAME, DB_PASSWD);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	 //关闭数据库链接
	public static void close(Connection conn) throws SQLException {
		if(conn != null) {
			conn.close();
		}
	}
	
	 //关闭statement 对象
	public static void close(Statement stat) throws SQLException {
		if(stat != null) {
			stat.close();
		}
	}
	//关闭结果集
	public static void close(ResultSet rs) throws SQLException {
	    if (rs != null) {
	      rs.close();
	    }
	}
	public static void close(Connection conn,Statement stat,ResultSet rs) throws SQLException {
		conn.close();
		stat.close();
		stat.close();
	}
	public static void close(Connection conn, Statement stat) throws SQLException {
		close(conn);
		close(stat);
	}
}

3.定义两个接口，实现Dao层和Service层（接口就不在这里写了）

package com.jd.address.imp;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.jd.address.IAddressDao;
import com.jd.address.vo.Address;
import com.jd.util.DBDao;



public class AddressDao extends DBDao implements IAddressDao {
	@Override
	public List<Address> selectByParentCode(String parentCode){
		Connection connection =null;
		Statement statement = null;
		ResultSet resultSet = null;
		
		
		try {
			connection = getDBConn();
			statement = connection.createStatement();
			String sql = "select * from area ";
			if(parentCode==null) {
				sql = sql + "where parent_code = ''";
			}else {
				sql = sql + "where parent_code ='"+parentCode+"'";
			}
			resultSet = statement.executeQuery(sql);
			List<Address> list = new ArrayList<Address>();
			while(resultSet.next()) {
				String name = resultSet.getString("name");
				String code = resultSet.getString("code");
				list.add(new Address(name, code));
			}
			return list;
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			try {
				close(connection, statement, resultSet);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return null;
		
		
	}
}

package com.jd.address.imp;

import java.util.List;

import com.jd.address.IAddressDao;
import com.jd.address.IAddressService;
import com.jd.address.vo.Address;

public class AddressService implements IAddressService {
	private IAddressDao addressDao = new AddressDao();
	@Override
	public List<Address> selectByParentCode(String parentCode) {
		// TODO Auto-generated method stub
		return addressDao.selectByParentCode(parentCode);
	}

}

4.在Servlet中使用JSON实现数据的传送

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		String parentCode = request.getParameter("parentCode");
		List<Address> list = addressService.selectByParentCode(parentCode);
		String json = new Gson().toJson(list);
		System.out.println(json);
		PrintWriter out = response.getWriter();
		out.println(json);
		out.flush();
		out.close();
	}

}

3.最终效果