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 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值