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...');
});

　　

    
    


    
省市区三级联动
    按省份选择：
    
        --省份--
    
    
        --市--
    
    
        --区县--
    
    

　　效果图：

转载于:https://www.cnblogs.com/yanxinhua/p/5820187.html