Ajax 使用 json 进行数据交互，实现级联菜单功能

最新推荐文章于 2021-07-20 12:03:33 发布

E1ffC1

最新推荐文章于 2021-07-20 12:03:33 发布

阅读量1.8k

点赞数

分类专栏： Ajax 文章标签： ajax json 级联菜单

本文链接：https://blog.csdn.net/qq_37176126/article/details/73175399

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

级联菜单在web开发中是我们经常使用的，例如想要一种在第一个下拉框中选择不同的内容，第二个下拉框则会显示不同的内容的效果，则可以通过 ajax 和 json 来实现这一效果，上代码---

jsp 页面内容

<body>
城市 ： <select id="city" οnchange="getArea();">
		<option>--请选择城市--</option>
		<option value="bj">北京</option>
		<option value="sh">上海</option>
		<option value="kf">开封</option>
	  </select>
地区 ： <select id="area">
	  </select>
</body>

js 代码

<script type="text/javascript">
	function getArea(){
		var city = document.getElementById("city");
		var cityOpt = city.options[city.selectedIndex]; //获取选中的下拉对象
		
		//alert(cityOpt.value);	//获取 选中的 value
		//alert(city.firstChild.nodeValue);	//获取 选中的文本内容
		//进行 异步请求
		//创建 XMLHttpRequest 对象
		var xhr;
		if(window.XMLHttpRequest){
			xhr = new XMLHttpRequest();			
		}else{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//发送请求
		xhr.open("POST","CascadeArea");
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send("city="+cityOpt.value);
		//处理响应
		var areaselect = document.getElementById("area");
		xhr.onreadystatechange = function(){
			//重新 获取前 先清空
			areaselect.innerHTML = "";
			if(xhr.readyState==4 && xhr.status == 200){
				var areas = JSON.parse(xhr.responseText);
				for(var i=0; i<areas.length; i++){ //循环创建 下拉选项
					var area = document.createTextNode(areas[i]);
					var opt = document.createElement("option");
					opt.appendChild(area);
					areaselect.appendChild(opt);
				}
			}
		}
	}
	
</script>

servlet 中处理请求

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String city = (String)request.getParameter("city");
		System.out.println(city);
		//模拟 dao 查询数据库
		List<String> area = new ArrayList<String>();
		if("bj".equals(city)){
			area.add("朝阳区");
			area.add("海淀区");
			area.add("西二旗");
		}
		if("sh".equals(city)){
			area.add("虹桥区");
			area.add("陆家嘴");
			area.add("东方明珠");
		}
		if("kf".equals(city)){
			area.add("金明区");
			area.add("明伦区");
			area.add("河南大学");
		}
		//将集合 转成 json 字符串需要导入GSON的jar包
		Gson gson = new Gson();
		String areaStr = gson.toJson(area);
		
		//输出 json 字符串
		response.setHeader("Content-Type", "text/html;charSet=utf-8");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		out.println(areaStr);
		out.flush();
	}

实现效果