Ajax来实现下拉框省市区三级联动效果（服务端基于express）
Posted O-Hua
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax来实现下拉框省市区三级联动效果（服务端基于express）相关的知识，希望对你有一定的参考价值。
//服务端JS代码：
//提供服务端的处理
const express = require(\'express\');
const fs = require(\'fs\');
const app = express();
//载入选择城市的页面
app.get(\'/\',function(req,res){
res.sendFile( __dirname + "/7.city.html" );
});
//获取所有的省份
app.get(\'/province\',function(req,res){
//读取json文件
fs.readFile(\'cityData.min.json\',\'utf8\',function(err,data){
if (err) throw err;
//data就是我们的整个json字符串,需要转成对象
//console.log(data);
//console.log(typeof data);
var cityObj = JSON.parse(data);
var province = [];
cityObj.forEach(function(item){
province.push(item.n);
});
//console.log(province);
res.json(province);
});
});
//获取指定省份的市区
app.get(\'/city\',function(req,res){
//获取传递过来的省份
var province = req.query.province;
fs.readFile(\'cityData.min.json\',\'utf8\',function(err,data){
if (err) throw err;
var cityObj = JSON.parse(data);
//如何找到对应省份下面的市区呢？
var city = [];
cityObj.forEach(function(item){
if (item.n == province) {
//对item.s进行遍历，针对每个对象，取出其属性为n的那个值
item.s.forEach(function(item1){
city.push(item1.n);
});
}
});
//console.log(city);
res.json(city);
});
});
//获取指定市区下面的所有区县
app.get(\'/country\',function(req,res){
var city = req.query.city;
fs.readFile(\'cityData.min.json\',\'utf8\',function(err,data){
if (err) throw err;
var cityObj = JSON.parse(data);
//如何找到对应省份下面的市区呢？
var country = [];
//难点在于如何找到对应的区县呢
cityObj.forEach(function(item){
//item就是每一个省份对象，需要对该对象的s属性【它是一个数组】，进行遍历
item.s.forEach(function(item1){
//item1是 一个二级的市区对象，需要对该对象的n属性，进行比较
if (item1.n == city) {
if(item1.s==null){
country=[];
}else{
//此时，该对象的s属性中保存的这些对象的n属性就是我们要的结果,需要对s属性进行遍历
item1.s.forEach(function(item2){
//item2就是三级的区县对象，只需要获取n属性即可
country.push(item2.n);
});
}
}
});
});
console.log(country);
res.json(country);
});
});
app.listen(2015,function(){
console.log(\'http server is listening localhsot in port 2015...\');
});
<!--客户端页面代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>省市区三级联动</h2>
<label for="">按省份选择：</label>
<select name="" id="province">
<option value="">--省份--</option>
</select>
<select name="" id="city">
<option value="">--市--</option>
</select>
<select name="" id="country">
<option value="">--区县--</option>
</select>
<script>
//使用ajax获取所有的省份
//第一步，创建xhr对象
var xhr = new XMLHttpRequest();
//第二步，需要建立和服务器的连接
xhr.open(\'get\',\'/province\');
//第三步，监听状态的变化
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
//可以接受返回数据
var res = JSON.parse(xhr.responseText);
//待定，稍后继续
var str = " <option value=\'\'>--省份--</option>";
res.forEach(function(item){
str += "<option value=\'"+item+"\'>"+item+"</option>";
});
//将str添加到select为province的下拉列表中
document.getElementById(\'province\').innerHTML = str;
}
}
//第四步，发送数据
xhr.send(null);
//当触发省份的下拉框时，需要发送ajax请求，获取对应的市区
var province = document.getElementById(\'province\');
province.onchange = function(){
//发起请求
xhr.open(\'get\',\'/city?province=\'+this.value);
//监听状态的变化
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse( xhr.responseText);
var str = "<option value=\'\'>--市--</option>";
res.forEach(function(item){
str += "<option value=\'"+item+"\'>"+item+"</option>";
});
document.getElementById(\'city\').innerHTML = str;
}
}
//发送请求
xhr.send(null);
}
//获取指定市区下面的区县
var city = document.getElementById(\'city\');
city.onchange = function(){
//发起请求
xhr.open(\'get\',\'/country?city=\'+this.value);
//监听状态的变化
xhr.onreadystatechange = function
(){
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse( xhr.responseText);
var str = "<option value=\'\'>--区县--</option>";
res.forEach(function(item){
str += "<option value=\'"+item+"\'>"+item+"</option>";
});
document.getElementById(\'country\').innerHTML = str;
}
}
//发送请求
xhr.send(null);
}
</script>
</body>
</html>
效果图：
以上是关于Ajax来实现下拉框省市区三级联动效果（服务端基于express）的主要内容，如果未能解决你的问题，请参考以下文章