jsp和json的三级联动 servlet没上传

最新推荐文章于 2022-02-16 08:58:16 发布

dong_dong2211

最新推荐文章于 2022-02-16 08:58:16 发布

阅读量145

点赞数 2

本文链接：https://blog.csdn.net/dong_dong2211/article/details/80272995

版权

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
</head>
<body style="font-size: 30px;" οnlοad="getProvinceFun()">
省份 : <select id = "province" name = "province" οnchange="getCityFun(this.value)">
<option>...请选择省...</option>
</select>
城市: <select id = "city" name = "city" οnchange="getAreaFun(this.value)">
<option>...请选择城市...</option>
</select>
县/区: <select id = "area" name = "area">
<option>...请选择县区...</option>
</select>
</body>
<script type="text/javascript">
function getXHR() {
var xhr;
//判读是否识别XMLHttpRequest属性兼容IE低版本
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//返回ajax请求，获取省份的数据
function getProvinceFun() {
//创建xhr对象
var xhr = getXHR();
//回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var json = JSON.parse(xhr.responseText);
var pNode = document.getElementById("province");
for(var i = 0;i<json.data.length;i++){
var op = new Option(json.data[i].provinceName,json.data[i].provinceCode);
//alert(jsonArray[i].code+","+jsonArray[i].name);
pNode.append(op);
}
}
};
//打开连接
xhr.open("GET","getProvince.do",true);
//返回请求
xhr.send();city
}
function getCityFun(pcode) {
//创建对象
var xhr = getXHR();
//回调函数
xhr.onreadystatechange= function() {
if(xhr.readyState==4 && xhr.status==200){
var json = JSON.parse(xhr.responseText);

var cNode = document.getElementById("city");
cNode.innerHTML = "";
var op = new Option("...请选择城市...");
cNode.append(op);
for(var i=0;i<json.data.length;i++){
op = new Option(json.data[i].cityName,json.data[i].cityCode);
//alert(jsonArray[i].code+","+jsonArray[i].name);
cNode.append(op);
}
}
};
//打开连接
xhr.open("GET","getCity.do?pcode="+pcode,true);
//发送请求
xhr.send();area
}
function getAreaFun(ccode) {
//创建对象
var xhr = getXHR();
//回调函数
xhr.onreadystatechange= function() {
if(xhr.readyState==4 && xhr.status==200){
var json = JSON.parse(xhr.responseText);

var aNode = document.getElementById("area");
aNode.innerHTML = "";
var op = new Option("...请选择县区...");
aNode.append(op);
for(var i=0;i<json.data.length;i++){
op = new Option(json.data[i].araeName,json.data[i].areaCode);
//alert(jsonArray[i].code+","+jsonArray[i].name);
aNode.append(op);
}
}
};
//打开连接
xhr.open("GET","getArea.do?ccode="+ccode,true);
//发送请求
xhr.send();
}
</script>
</html>

dong_dong2211

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp和json的三级联动 servlet没上传

&lt;%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body style="font-size: 30px;" onload="getProvinceFun()"&gt;
复制链接

扫一扫