json省市联动解析

蔚落 2023-10-01 08:54 5阅读 0赞

<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<html>  
<head>  
<title>Title</title>  
<script type="text/javascript">  
/\*  
\* 1、在文档加载完成后  
\* 获取所有省，添加到<select id="province">中  
\* 给<select id="province">这个元素添加onchange事件  
\* 事件内容：  
\* 1、获取当前选择的省id  
\* 2、使用省id访问servlet，得到该省下所有市  
\* 3、把每个市添加到<select id="city">中  
\* \*/  
function createXMLHttpRequest() \{  
try \{  
return new XMLHttpRequest();  
\}catch (e) \{  
try \{  
return new ActiveXObject("Msxml2.XMLHTTP");  
\} catch (e) \{  
return new ActiveXObject("Micorsoft.XMLHTTP");  
\}  
\}  
\}  
window.onload = function () \{  
/\*  
\* 发送异步请求，得到所有省，然后使用每个省生成一个<option>元素添加到<select id="province">中  
\* \*/  
var xmlHttp = createXMLHttpRequest();  
xmlHttp.open("GET","<c:url value='/ProvinceServlet'/>",true);//打开连接  
xmlHttp.send(null);//发送  
xmlHttp.onreadystatechange = function () \{//添加监听  
if (xmlHttp.readyState == 4 ) \{  
if (xmlHttp.status == 200) \{  
var proArray = eval("("+xmlHttp.responseText+")");//执行服务器发送过来的json字符串，得到json的对象  
for (var i = 0; i<proArray.length; i++) \{  
var pro = proArray\[i\];//得到每个pro对象  
var optionEle = document.createElement("option");//创建<option>元素  
optionEle.value = pro.pid;//<option>的实际值赋为pid，而不是name  
var textNode = document.createTextNode(pro.name);//使用省名称来创建textNode  
optionEle.appendChild(textNode);//把textNode添加到option元素中  
document.getElementById("province").appendChild(optionEle);//把option元素添加到select元素中  
\}  
\}  
\}  
\};  
//2、给<select id="province">添加change监听  
document.getElementById("province").onchange = function () \{  
var xmlHttp = createXMLHttpRequest();//异步请求服务器，得到选择的省下的所有市  
xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);//打开连接  
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置请求头  
xmlHttp.send("pid="+this.value);//发送,用户选择的省  
xmlHttp.onreadystatechange = function () \{//添加监听  
if (xmlHttp.readyState == 4) \{  
if (xmlHttp.status == 200) \{  
/\*  
\* 0、先清空原来的<option>元素  
\* 1、得到服务器发送过来的所有市  
\* 2、使用每个市生成<option>元素添加到<select id="city">中  
\* \*/  
//清空<select id="city">中的选项  
var citySelect = document.getElementById("city");  
var cityOptionArray = citySelect.getElementsByTagName("option");//获取select中的所有子元素  
while (cityOptionArray.length >1) \{  
citySelect.removeChild(cityOptionArray\[1\]);  
\}  
var cityArray = eval("("+xmlHttp.responseText+")");//得到服务器发送过来的所有市  
for (var i = 0; i<cityArray.length; i++) \{  
var city= cityArray\[i\];//得到每个city对象  
var optionEle = document.createElement("option"); //创建<option>元素  
optionEle.value = city.cid;//<option>的实际值赋为pid，而不是name  
var textNode = document.createTextNode(city.name);//使用城市名称来创建textNode  
optionEle.appendChild(textNode);//把textNode添加到option元素中  
citySelect.appendChild(optionEle);//把option元素添加到select元素中  
\}  
\}  
\}  
\};  
\};  
\};  
</script>  
</head>  
<body>  
<h1>省市联动</h1>  
<select name="province" id="province">  
<option value="">===请选择省份===</option>  
</select>  
<select name="city" id="city">  
<option value="">===请选择城市===</option>  
</select>  
</body>  
</html>