JSP中Json实现三级级联

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

Bless___

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

阅读量200

点赞数 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>

这样就实现了三级级联，DBUtil详见：

Bless___

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JSP中Json实现三级级联

我们这里要实现一个省市县的三级级联我们先在数据库中创建一个表，包含每个地区的地址码（即是你身份证的前六位），他们还有额外一个属性就是父地址码，省级的父地址码为空，市级的父地址码为所在省级的地址码，区级的父地址码为所在市级的地址码。如图所示的一小部分我们要用到JDBC将数据库与Java连接起来，这里我提前写好了一个DBUtil工具类，我们先写一个Area类public class Area...
复制链接

扫一扫