JSP中Json实现三级级联

最新推荐文章于 2024-01-19 23:44:06 发布

Bless___

最新推荐文章于 2024-01-19 23:44:06 发布

阅读量228

点赞数 1

文章标签： JSP

本文链接：https://blog.csdn.net/S_Tian/article/details/103421039

版权

我们这里要实现一个省市县的三级级联

我们先在数据库中创建一个表，包含每个地区的地址码（即是你身份证的前六位），他们还有额外一个属性就是父地址码，省级的父地址码为空，市级的父地址码为所在省级的地址码，区级的父地址码为所在市级的地址码。如图所示的一小部分

在这里插入图片描述

我们要用到JDBC将数据库与Java连接起来，这里我提前写好了一个DBUtil工具类，我们先写一个Area类


public class Area {
 	private String id;
 	private String code;
 	private String name;
 	private String parentCode;
 	public String getId() {
  		return id;
 	}
 	public void setId(String id) {
  		this.id = id;
 	}
 	public String getCode() {
  		return code;
 	}
 	public void setCode(String code) {
  		this.code = code;
 	}
 	public String getName() {
  		return name;
 	}
 	public void setName(String name) {
  		this.name = name;
 	}
 	public String getParentCode() {
  		return parentCode;
 	}
 	public void setParentCode(String parentCode) {
  		this.parentCode = parentCode;
 	}
 	public Area(String id, String code, String name, String parentCode) {
  		this.id = id;
  		this.code = code;
  		this.name = name;
  		this.parentCode = parentCode;
 	}
 	@Override
 	public String toString() {
  		return "Area [id=" + id + ", code=" + code + ", name=" + name + ", parentCode=" + parentCode + "]";
 	}
}

这是一个vo类，里面有一个构造方法，以及重写了一个toString方法

我们再写一个Servlet文件，只保留doGet方法：

public class DataServlet extends HttpServlet {
 	private static final long serialVersionUID = 1L;
 	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String code = request.getParameter("code");//从jsp文件传过来的，下一个文件就是jsp文件
		class RowMapper implements IRowMapper{
			List<Area> list = new ArrayList<Area>();
			public void rowMapper(ResultSet resultSet){
				try{
					while(resultSet.next()){
						list.add(new Area(resultSet.getString("id"), resultSet.getString("code"),resultSet.getString("name"), resultSet.getString("parent_code")));
					}
				}catch(SQLException e){
					e.printStackTrace();
				}
			}
		}
		String sql = "select * from area where parent_code=?";
		RowMapper rowMapper = new RowMapper();
		DBUtil.select(sql,rowMapper,code);

		List<Area> list = rowMapper.list;

		PrintWriter out = response.getWriter();
		out.print(new Gson().toJson(list));//这里需要引入一个Gson的jar包
		//Json数据结构：将Java对象转换为字符串
		out.flush();
		out.close();
	}
}

我们再写jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
  		<title>Insert title here</title>
  		<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script><!--引入jQuery的jar包-->
  		<script type="text/javascript" src="./js/json2.js"></script><!--引入json的js文件-->
	</head>
	<body>
		<select id="province"  onchange="getCity()">
   			<option>--请选择省份--</option>
  		</select>
  		<select id="city"  onchange="getCountry()">
   			<option>--请选择市--</option>
 	 	</select>
  		<select id="country">
   			<option>--请选择县/区--</option>
  		</select>

		<script>
			function getProvince(){
				var object = {
					url:"./DataServlet?code"="",//向DataServlet中传值
					type:"get",
					success:function(data){
						//这里的data是Servlet文件中返还回来的out值，即一个字符串，我们现在要把这个字符串转换为JavaScript对象
						var provinces = JSON.parse(data);//把json字符串转换为JavaScript对象(数组类型)
						var options = "<option>--请选择省份--</option>";
						for(var i=0;i<provinces.length;i++){
							options = options+"<option value=\""+provinces[i].code+"\">"+provinces[i].name+"</option>";
						}
						$("#province").empty();
						$("#province").append(options);
					}
				};
				$.ajax(object);
			}
			getProvince();
			
			function getCity(){
    				var object = {
      					url:"./DataServlet?code="+$("#province").val(),//???
      					type:"get",
      					success:function(data){
       						var citys = JSON.parse(data);//把json字符串转换为JavaScript对象
       						var options = "<option>--请选择市--</option>"
       						for(var i=0;i<citys.length;i++){
        							console.log(citys[i].name+":"+citys[i].code);
        							options =options+"<option value=\""+citys[i].code+"\">"+citys[i].name+"</option>";
       						}
       						$("#city").empty();
       						$("#city").append(options);
       						//下面两步解决修改省份之后，县区没有重置的问题
       						$("#country").empty();
       						$("#country").append("<option>--请选择县/区--</option>");
      					}
     				};
     				$.ajax(object);
   			}

			function getCountry(){
    				var object = {
      					url:"./DataServlet?code="+$("#city").val(),//???
      					type:"get",
      					success:function(data){
       						var countrys = JSON.parse(data);//把json字符串转换为JavaScript对象
       						var options = "<option>--请选择县/区--</option>";
       						for(var i=0;i<countrys.length;i++){
        							console.log(countrys[i].name+":"+countrys[i].code);
        							options =options+"<option value=\""+countrys[i].code+"\">"+countrys[i].name+"</option>";
       						}
      				 		$("#country").empty();
       						$("#country").append(options);
      					}
     				};
     				$.ajax(object);
   			}
		</script>
	</body>
</html>