省市区三级级联式菜单

前后端交互式三级级联式菜单

效果展示：

1. 使用node.js作为后端的前后端交互式级联菜单
2. 使用es6面对对象方式

使用资源

此处截取片段：

整体思路

首先发送ajax请求省份，将值传入select标签中，再根据select的value值请求市，在更具市的值来请求区。

代码实现

1. 首先，根据需求设计接口文档：## 三级式级联菜单接口文档

URL ：http://10.9.72.248:4001

Method :GET

DataType :

 请求消息: QueryString
 响应消息: JSON

接口名称

1.http://http://10.9.72.248:4001/province/
2.http://http://10.9.72.248:4001/city/
3.http://http://10.9.72.248:4001/district/

获取省份数据

 接口名：province
请求：无参数或者有参数参数为省份
响应：
{
   
province:[北京，天津，河北...]
}

获取城市数据

接口名：city
请求：province
响应：
{
   
city:[石家庄，秦皇岛，邯郸,...]
}

获取区数据

接口名：district
请求：city
响应：
["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县", "其他"]

2. node 服务器的编写

data.js 文件为各省市数据这里以commonjs的规则将数据作为一个模块

3.node 代码：

var data = require('./data.js')//引入上方数据模块
var http = require('http')//引入内置http模块用于开启服务，前后端交互
var querystring = require('querystring')//用于querystring模块用于解析数据
var server = http.createServer(createChannel)//开启服务
var res, req//设置全局变量，保存数据
function createChannel(_req, _res) {
   

    var reqData = "";//用于保存前端请求数据
    req = _req
    res = _res
    res.writeHead(200, {
   
        "content-type": "text/html;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*",
        //请求头跨域 如果请求头发生修改并且非同源，就需要申请请求头跨域
    });
    req.on("data", function(_data) {
   
        reqData += _data;
    });//类似前端的事件绑定，前端数据发送来触发
    req.on("end", function() {
   //同理，前端发送数据结束后触发
        // type是接口名称
        var type = req.url.trim().split("?")[0].replace(/\//g, "");
//利用正则和字符串方法截取街头名称
        if (req