nodejs三级联动

标题

html## 标题

<script type="module">

    import QueryString from "../js/QueryString.js";

    var citiesId, countiesID, id, perform, Plist,arr6 =[] ,arr5 = [], arr1 = [], arr2 = [], arr3 = [], arr4 = [];
    init();
    function init() {
        ajax("province")
    }
    function ajax(type, data) {
        if (data === undefined) data = "";
        data = QueryString.stringify(data);
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", loadHanlder);
        xhr.open("GET", "http://10.9.72.249:4900/" + type + "/?" + data);
        xhr.send();
    }

    function loadHanlder(e) {
        var xhr = e.currentTarget;
        xhr.removeEventListener("load", loadHanlder);
        var type = xhr.responseURL.trim().split("?")[0];
        if (type.slice(-1) === "/") type = type.slice(0, -1);
        type = type.split("/").pop();
        var o = JSON.parse(xhr.response);
        Plist = o.provinceList
        citiesId = o.citiesList
        countiesID = o.countiesList
        createList(Plist);
    }

    function createList(data) {
        var select1 = document.querySelector("#province");
        var frg = document.createDocumentFragment()
        for (var i = 0; i < data.length; i++) {
            var option = document.createElement('option')
            option.textContent = data[i].provinceName
            frg.appendChild(option)
        }
        select1.appendChild(frg)
        select1.addEventListener("change", changeHandler);
        console.log(data[0].cities)
        for (let i = 0; i < data[0].cities.length; i++) {
            citiesId.forEach(item => {
                if (item.id === data[0].cities[i]) {
                    arr6.push(item)
                }
            })
        }
        createList2(arr6)
        arr6 =[]
        arr6.length = 0
    }

    function changeHandler(e) {
        arr1 = []
        arr1.length = 0
        arr2 = []
        arr2.length = 0
        Plist.forEach(item => {
            if (item.provinceName === this.value) {
                item.cities.forEach(item => {
                    arr1.push(item)
                })
            }
        })
        for (let i = 0; i < arr1.length; i++) {
            citiesId.forEach(item => {
                if (item.id === arr1[i]) {
                    arr2.push(item)
                }
            })
        }
        createList2(arr2)
    }
    function createList2(data) {
        var select2 = document.querySelector("#cities");
        select2.innerHTML = ''
        var frg = document.createDocumentFragment()
        for (var i = 0; i < data.length; i++) {
            var option = document.createElement('option')
            option.textContent = data[i].citiesName
            frg.appendChild(option)
        }
        select2.appendChild(frg)
        select2.addEventListener("change", changeHandler2);
        for (let i = 0; i < data[0].counties.length; i++) {
            countiesID.forEach(item => {
                if (item.id === data[0].counties[i]) {
                    arr5.push(item)
                }
            })
        }
        createList3(arr5)
        arr5 = []
        arr5.length = 0
    }


    function changeHandler2(e) {
        arr3 = []
        arr3.length = 0
        arr4 = []
        arr4.length = 0
        citiesId.forEach(item => {
            if (item.citiesName === this.value) {
                item.counties.forEach(item => {
                    arr3.push(item)
                })
            }
        })

        for (let i = 0; i < arr3.length; i++) {
            countiesID.forEach(item => {
                if (item.id === arr3[i]) {
                    arr4.push(item)
                }
            })
        }
        createList3(arr4)
    }
    function createList3(data) {
        var select3 = document.querySelector("#counties");
        select3.innerHTML = ''
        var frg = document.createDocumentFragment()
        for (var i = 0; i < data.length; i++) {
            var option = document.createElement('option')
            option.textContent = data[i].countiesName
            frg.appendChild(option)
        }
        select3.appendChild(frg)
    }
</script>

js
使用nodejs开启服务器
let http = require(‘http’)
let querystring = require(‘querystring’)
let provinceList = [
{
id:“1001”,
provinceName:‘山东省’,
cities:[10001,10002,10003,10004]
},
{
id:“1002”,
provinceName:‘浙江省’,
cities:[10005,10006,10007,10008]
},
{
id:“1003”,
provinceName:‘江苏省’,
cities:[10009,10010,10011,10012]
},
{
id:“1004”,
provinceName:‘湖北省’,
cities:[10013,10014,10015,10016]
}
]
let citiesList = [
{ id:10001,citiesName:‘济南市’,counties:[100011,100012] },
{ id:10002,citiesName:‘青岛市’,counties:[100021,100022] },
{ id:10003,citiesName:‘临沂市’,counties:[100031,100032] },
{ id:10004,citiesName:‘淄博市’,counties:[100041,100042] },
{ id:10005,citiesName:‘杭州市’,counties:[100051,100052] },
{ id:10006,citiesName:‘宁波市’,counties:[100061,100062] },
{ id:10007,citiesName:‘温州市’,counties:[100071,100072] },
{ id:10008,citiesName:‘绍兴市’,counties:[100081,100082] },
{ id:10009,citiesName:‘南京市’,counties:[100091,100092] },
{ id:10010,citiesName:‘无锡市’,counties:[100101,100102] },
{ id:10011,citiesName:‘徐州市’,counties:[100111,100112] },
{ id:10012,citiesName:‘常州市’,counties:[100121,100122] },
{ id:10013,citiesName:‘武汉市’,counties:[100131,100132] },
{ id:10014,citiesName:‘宜昌市’,counties:[100141,100142] },
{ id:10015,citiesName:‘黄石市’,counties:[100151,100152] },
{ id:10016,citiesName:‘十堰市’,counties:[100161,100162] },
]
let countiesList = [
{ id:100011,countiesName:‘历下区’ },
{ id:100012,countiesName:‘市中区’ },
{ id:100021,countiesName:‘胶州市’ },
{ id:100022,countiesName:‘莱西市’ },
{ id:100031,countiesName:‘沂南县’ },
{ id:100032,countiesName:‘沂水县’ },
{ id:100041,countiesName:‘桓台县’ },
{ id:100042,countiesName:‘高青县’ },
{ id:100051,countiesName:‘桐庐县’ },
{ id:100052,countiesName:‘上城区’ },
{ id:100061,countiesName:‘象山县’ },
{ id:100062,countiesName:‘宁海县’ },
{ id:100071,countiesName:‘永嘉县’ },
{ id:100072,countiesName:‘平阳县’ },
{ id:100081,countiesName:‘越城区’ },
{ id:100082,countiesName:‘柯桥区’ },
{ id:100091,countiesName:‘玄武区’ },
{ id:100092,countiesName:‘浦口区’ },
{ id:100101,countiesName:‘锡山区’ },
{ id:100102,countiesName:‘惠山区’ },
{ id:100111,countiesName:‘鼓楼区’ },
{ id:100112,countiesName:‘泉山区’ },
{ id:100121,countiesName:‘天宁区’ },
{ id:100122,countiesName:‘新北区’ },
{ id:100131,countiesName:‘江岸区’ },
{ id:100132,countiesName:‘江汉区’ },
{ id:100141,countiesName:‘远安县’ },
{ id:100142,countiesName:‘兴山县’ },
{ id:100151,countiesName:‘下陆区’ },
{ id:100152,countiesName:‘铁山区’ },
{ id:100161,countiesName:‘茅箭区’ },
{ id:100162,countiesName:‘张湾区’ },
]

var server=http.createServer(function(req,res){
var data="";
res.writeHead(200,{
“content-type”:“text/html;charset=utf-8”,
“Access-Control-Allow-Origin”:"",
“Access-Control-Allow-Headers”:"",
});
req.on(“data”,function(_data){
data+=_data;
});
req.on(“end”,function(){
var type=req.url.trim().split("?")[0].replace(///g,"");
if(req.method.toLowerCase()===“get”){
if(req.url.includes(“favicon.ico”)) return res.end();
data=req.url.includes("?") ? req.url.split("?")[1] : “”;
}
try{
data=JSON.parse(data);
}catch(e){
data=data ? querystring.parse(data) : {};
}
var o={}
switch(type){
case “province”:
o.provinceList=provinceList;
o.citiesList=citiesList;
o.countiesList=countiesList.map(item=>{
return {id:item.id,countiesName:item.countiesName}
})
break;
}
res.write(JSON.stringify(o));
res.end();
})
});
server.listen(4900,“10.9.72.249”,function(){
console.log(“服务器开启成功”);
})

开发文档接口

项目列表接口

URL :http://10.9.72.249:4900

Method :GET

DataType :

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

接口名称

http://10.9.72.249:4900/province/
http://10.9.72.249:4900/cities/
http://10.9.72.249:4900/counties/

获取项目和省市县的数据

接口名 province
请求 ： 无参数
响应 ：
{
provinceList:[
{
id:“项目id”,
provinceName:‘省名称’
cities:[市级id数组]
}
…
]
citiesList:[
{
id:“市级id”,
citiesName:‘市名称’
counties:[县级id数组]
},
…
]
countiesList:[
{
id:“县级id”,
countiesName:‘县名称’
},
…
]
}