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)的主要内容,如果未能解决你的问题,请参考以下文章

ajax实现三级联动下拉菜单

省市区三级联动下拉框效果分析

java web开发下拉框联动显示,显示的数据市是数据库中获取 比如 省、市、地区,应该如何做?

用jsp实现省市区三级联动下拉

ajax实现省市区三级联动(例题)

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能