Ajax二级联动

最新推荐文章于 2024-07-27 18:51:22 发布

神也会困

最新推荐文章于 2024-07-27 18:51:22 发布

阅读量224

点赞数

文章标签： Ajax 二级联动 json java

本文链接：https://blog.csdn.net/qq_42572245/article/details/90743364

版权

需要的包
在这里插入图片描述

.jsp

<body>
省：
<select id="sheng" onchange="loadInfo()">
	<option value="1">江苏省</option>
	<option value="2">山东省</option>
	<option value="3">浙江省</option>
</select>
&nbsp;&nbsp;
市
<select id="shi">
</select>
</body>

<script type="text/javascript">
	function loadInfo(){
		var shengId=document.getElementById("sheng").value;
		var shi=document.getElementById("shi);
		shi.options.length=0;//每次需要将市的长度设置为0，不然每次改变会使option叠加
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				alert(xmlHttp.responseText);
				var dataObj=eval("("+xmlHttp.responseText+")");
				for(var i=0;i<dataObj.rows.length;i++){
					var o=dataObj.rows[i];
					shi.options.add(new Option(o.text));//根据返回数据长度创建出新的option
				}
			}
		};
		xmlHttp.open("POST", "ej?shengId="+shengId, true);//post请求提交数据
		
	    xmlHttp.send();
	}
</script>

.java

@WebServlet("/ej")
public class TwoLevel extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html;charset=utf-8");//设置编码
		PrintWriter out=resp.getWriter();
		String shengId=req.getParameter("shengId");
		JSONObject resultJson=new JSONObject();
		JSONArray jsonArray=new JSONArray();
		JSONObject temp=null;
		switch(Integer.parseInt(shengId)){
			case 1:{
				temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
				break;
			}
			case 2:{
				temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
				break;
			}
			case 3:{
				temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
				break;
			}
		}
		resultJson.put("rows", jsonArray);
		out.println(resultJson);
		out.flush();
		out.close();
	}

}

神也会困

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax二级联动

需要的包.jsp<body>省：<select id="sheng" onchange="loadInfo()"> <option value="1">江苏省</option> <option value="2">山东省</option> <option value="3">浙江省</opti...
复制链接

扫一扫