首页 > 代码库 > Ajax来实现下拉框省市区三级联动效果（服务端基于express）
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=http://www.mamicode.com/‘‘>--省份--"; res.forEach(function(item){ str += "<option value=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘‘>--市--"; res.forEach(function(item){ str += "<option value=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘‘>--区县--"; res.forEach(function(item){ str += "<option value=http://www.mamicode.com/‘"+item+"‘>"+item+"</option>"; }); document.getElementById(‘country‘).innerHTML = str; } } //发送请求 xhr.send(null); } </script></body></html>效果图：
Ajax来实现下拉框省市区三级联动效果（服务端基于express）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。