NodeJS+Ajax实现省市联动

浏览器端效果图：

实现思路：

①前端选择下拉框内的省份，用Ajax将省份名传给后台；②后台根据省份名从省份-城市模块（City_Data.js文件）中搜索该省份对应的js城市对象，返回给服务器；③前端接收到数据再进行显示处理。

思路重点解释：

①利用Ajax传递省份名

②省份-城市模块（City_Data.js文件） 

模块是NodeJS里的概念，简单地讲，一个js文件就是一个模块，这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。本文的模块是City_Data.js，内容为JS对象，具体内容如下：

后台对该模块的引用（注意文件名后不要加.js后缀）：

 

对模块中数据的调用（province为前端获取的省份名）：

获取到的cities在控制台显示：

 

③前端显示处理（显示+点击字体变色）

显示重点：动态生成li。城市名的显示框实际是一个ul，每一个城市名对应一个li。关键代码如下：

for (var i = 0; i <= citynames.length - 1; i++) {//为ul添加li，每个li存储一个城市
    var node=document.createElement("LI");
    node.innerHTML= citynames[i];
    city.appendChild(node);
}

点击字体变色重点：获取点击的li。

在html对ul添加点击事件，首先是获取点击的li对象，然后对选中li赋予一个改变颜色的class。这里用的原生JS代码，当然，用Jquery会简单很多。代码如下：

function changecolor(event)
{//改变选中城市的颜色为红色
	for (var i = 0; i <= event.target.parentNode.childNodes.length - 1; i++) {
		event.target.parentNode.childNodes[i].className="";//所有li字体颜色为默认黑色
	}
	if(event.target.tagName=="LI")
	{
		event.target.className="list";//.list设置为字体颜色为红
	}
}

完整代码如下：

前端html、css、js 

 index.html:

<select id="pro" name="pro">
	<option value="">省份</option>
	<option value="四川">四川</option>
	<option value="北京">北京</option>
</select>
<ul id="CITY" name="CITY" class="CITY" onclick="changecolor(event)"></ul>

 index.js:

function changecolor(event)
{//改变选中城市的颜色为红色
	for (var i = 0; i <= event.target.parentNode.childNodes.length - 1; i++) {
		event.target.parentNode.childNodes[i].className="";//所有li字体颜色为默认黑色
	}
	if(event.target.tagName=="LI")
	{
		event.target.className="list";//.list设置为字体颜色为红
	}
}
// 选择省份后通过Ajax传递对应市
$('#pro').on('change', function(){
 		var city=document.getElementById('CITY');
 		$.ajax({
			type: "get",
			url: "/getCityData",
			data: {
				province:$('#pro').find("option:selected").text()//选择的省名
			},
			success: function(res) {
				var citynames = res.cities;//js数组
				city.innerHTML="";
				for (var i = 0; i <= citynames.length - 1; i++) {//为ul添加li，每个li存储一个城市
					var node=document.createElement("LI");
					node.innerHTML= citynames[i];
					city.appendChild(node);
				}
			}
		});	
})

index.css:

.CITY{border: 1px #ddd solid;width: 150px;height: 130px;overflow-x: none;overflow-y: scroll;list-style-type: none;}
.list{color: red;}

 

后端js

server.js:

const express = require('express');
const app = express();
var City = require('./City_Data');
// 接收ajax的get请求
app.get("/getCityData", function(req, res) {
    let province = req.query.province;
    var cities = City[province];//获取对应省的所有城市名
    console.log(cities);
    return res.json({
        cities: cities//js对象
    });
});
app.listen(8888, function(){
    console.log('Server running at http://127.0.0.1:8888/');
})

City_Data.js:

City={
	四川:[
		"成都市", "绵阳市", "广元市", "达州市",
	"南充市", "德阳市", "广安市", "阿坝州", "巴中市", "遂宁市", "内江市",
	"凉山州", "攀枝花市", "乐山市", "自贡市", "泸州市", "雅安市", "宜宾市",
	"资阳市", "眉山市", "甘孜州"
	],
	北京:[
		"朝阳区", "海淀区", "通州区", "房山区", 
	"丰台区", "昌平区", "大兴区", "顺义区", "西城区", "延庆县", "石景山区", 
	"宣武区", "怀柔区", "崇文区", "密云县", "东城区", "平谷区", "门头沟区"
	]
}
module.exports=City;

程序运行过程：

1.根目录下启动server.js。在server.js所在文件目录下按住shift按钮并右击鼠标，选择“在此处打开powershell窗口”。输入node.server.js；2.浏览器输入127.0.0.1:8888/index.html