JSON实现三级关联-优快云博客

本文链接：https://blog.youkuaiyun.com/low1101/article/details/103425605

本文介绍了如何通过JSON实现三级联动效果，具体涉及选择省、市、县区时的自动筛选。关键步骤包括：利用Gson将JSONObject转为JSON字符串，使用JSON.parse()将字符串转换成JavaScript对象，并在onchange事件中关联各个选择项。示例代码包括Area、DataServlet和index.jsp的部分，最终实现了选择浙江省-金华市-东阳市的联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在有三个select，需要实现效果如下：选择省后自动筛选该省的市，再选择市后自动筛选该市的县区。

实现需求的关键：

1、使用JSON解析工具解决new Gson().toJson() 将存在JSONObject成员的对象转JSON字符串

2、使用 JSON.parse() 方法将JSON字符串转换为 JavaScript 对象

3、然后onchange事件的添加,将三个事件关联起来

那接下来就直接上代码了。

Area代码如下：

package com.jd.vo;

public class Area {
	 private String id;
	 private String name;
	 private String code;
	 private String parentCode;
	public Area(String id, String name, String code, String parentCode) {
		super();
		this.id = id;
		this.name = name;
		this.code = code;
		this.parentCode = parentCode;
	}
	
	
	public String getId() {
		return id;
	}


	public void setId(String id) {
		this.id = id;
	}


	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;
	}


	public String getParentCode() {
		return parentCode;
	}


	public void setParentCode(String parentCode) {
		this.parentCode = parentCode;
	}


	@Override
	public String toString() {
		return "Area [id=" + id + ", name=" + name + ", code=" + code + ", parentCode=" + parentCode + "]";
	}
	 
	
}

DataServlet代码如下：

package com.jd.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

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 com.google.gson.Gson;
import com.jd.vo.Area;
import com.jd.www.IResOut;
import com.jd.www.db.DBUtil;
@WebServlet("/DataServlet")
public class DataServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		String code = request.getParameter("code");
		
		if(code==null) {
			code="";
		}
		
		class ResOut implements IResOut{
			List<Area> list = new ArrayList<Area>();
			@Override
			public void getres(ResultSet resultSet){
				try {
					while(resultSet.next()) {
						list.add(new Area(resultSet.getString("id"),resultSet.getString("name"),resultSet.getString("code"),resultSet.getString("parent_code")));
					}
				} catch (Exception e) {
					e.printStackTrace();
				}
			}	
			
		}
		String sql= "select*from area where parent_code=? order by CONVERT(area.name USING GBK) asc";
		ResOut resOut = new ResOut();
		DBUtil.select(sql, resOut, code);
		
		List<Area> list = resOut.list;
		PrintWriter out= response.getWriter();
		
		//json解析工具解决new Gson().toJson() 将存在JSONObject成员的对象转json字符串
		out.print(new Gson().toJson(list));
		out.flush();
		out.close();
	}
}

index.jsp代码如下：

<%@ 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>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="./js/json2.js" ></script>
		<style>
			option{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<select id= "province" onchange="getCity()">
			<option >--请选择省--</option>
		</select>
		<select id= "city" onchange="getCounty()">
			<option >--请选择市--</option>
		</select>
		<select id= "county" >
			<option >--请选择区--</option>
		</select>
		<script type="text/javascript">
			function getProvince(){
				var object ={
						url:"./DataServlet?code="+"",
						type:"get",
						success:function(data){
							var provinces=JSON.parse(data);
							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);
							$("#city").empty();
							$("#city").append("<option>--请选择市--</option>");
						}
				};
				$.ajax(object);
			}
			getProvince();
			
			function getCity(){
				var object ={
						url:"./DataServlet?code="+$("#province").val(),
						type:"get",
						success:function(data){
							var cities=JSON.parse(data);
							var options="<option>--请选择市--</option>"
							for( var i=0; i<cities.length;i++){
								options = options+"<option value=\""+cities[i].code+"\">"+cities[i].name+"</option>"
							}
							$("#city").empty();
							$("#city").append(options);
							$("#county").empty();
							$("#county").append("<option>--请选择区--</option>");
						}
				};
				$.ajax(object);
			}
			function getCounty(){
				
				var object ={
						url:"./DataServlet?code="+$("#city").val(),
						type:"get",
						success:function(data){
							var counties=JSON.parse(data);
							var options="<option>--请选择区--</option>"
							for( var i=0; i<counties.length;i++){
								options = options+"<option value=\""+counties[i].code+"\">"+counties[i].name+"</option>"
							}
							$("#county").empty;
							$("#county").append(options);	
						}
				};
				$.ajax(object);
			}
		</script>
	</body>
</html>

这中间用到的DBUtil工具类是我以前学习myaql时封装好的，所以这次直接拿来用了。

实现的结果如下：

选择浙江省——>