//服务端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）的更多相关文章

  1. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  2. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  3. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. ThinkPHP中ajax绑定select下拉框无法显示

    html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...

  5. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

  6. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  7. 用Vue2仿京东省市区三级联动效果

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...

  8. jQuery Ajax实现下拉框无刷新联动

    HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); stri ...

  9. （webapp）微信和safri 对于html5 部分功能不兼容，多选或单选下拉框去除边框无效果。

    1 appearance:none; 2 -moz-appearance:none; /* Firefox */ 3 -webkit-appearance:none; /* Safari 和 Chro ...

随机推荐

  1. 网络IO超时的几种实现

    一.select/poll/epoll int select(int maxfdp1, fd_set *readset, fd_set *writeset, fd_set *exceptset,str ...

  2. plsql启动提示监听服务无法连接

    话说现在用的oracle少了,本人菜鸟一个,但是我真心的没有感觉到它用的少了,今天入了一个新项目,数据库使用的还是oracle,经理二话不说的给了一些东西,说了让一句你把环境啥地 配置一下,然后走人了 ...

  3. 开发一个http代理服务器

    参考链接: http://www.cnblogs.com/jivi/archive/2013/03/10/2952860.html https://www.2cto.com/kf/201405/297 ...

  4. Ecplise 配置本地 https 测试

    今天做项目,需要关联Office 365.为了实现Office365的用户邮件信息与项目的实时同步,需要建立webhook订阅. Office 365 API 连接  https://graph.mi ...

  5. shell：bash环境

    1.什么是shell shell一般代表两个层面的意思,一个是命令解释器,比如BASH,另外一个是shell脚本. 命令解释器shell的发展史,sh-csh-ksh-tcsh-bash. 2.命令的 ...

  6. poj 2945 Find the Clones

    https://vjudge.net/problem/POJ-2945 题意: 给出n个长度相同的DNA序列,如果一个DNA序列出现过两次,那么就有说明它被复制了一次.问被复制0次,1次,2次--n- ...

  7. eclipse点击包(package)时报错，安装hibernate后点击包报错org/eclipse/jpt/common/utility/exception/ExceptionHandler

    错误描述: 当我们点击包名时,出现如下错误提示.An error has occurred. See error log for more details.org/eclipse/jpt/common ...

  8. CentOS 7 源码编译安装MySQL 5.7.14

    一.添加用户和组 1. 进入root: su 2. 添加组: groupadd mysql 3. 添加用户: useradd -r -g mysql -s /bin/false mysql 二.安装 ...

  9. 逻辑运算符、三元运算符、for循环、stack(栈)，heap(堆)，方法区，静态域

    Lesson One 2018-04-17 19:58:39 逻辑运算符(用于逻辑运算,左右两边都是 true 或 false) 逻辑与-& 和 短路与-&& 区别: & ...

  10. 0323-DOM基础操作

    dom操作 1.找到元素(标签对象) 标签名: document.getElementsByTagName()[]; //返回的是数组类型,需要有下标来找内容 属性: document.getElem ...