json省市联动解析

最新推荐文章于 2024-04-24 21:48:46 发布

G-宁

最新推荐文章于 2024-04-24 21:48:46 发布

阅读量326

点赞数 1

文章标签： json html

本文链接：https://blog.csdn.net/weixin_58094032/article/details/121806508

版权

<%@ 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>

G-宁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json省市联动解析

<%@ 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"> /...
复制链接

扫一扫