简单的get请求前后端交互省市区三联

客户端

 var province=document.querySelector("#province");
        var city=document.querySelector("#city");
        var district=document.querySelector("#district");
        var dataList;
        init()
        function init(){
            ajax("project");
        }
     
        function ajax(type,data){
            if(data===undefined) data="";
            var xhr=new XMLHttpRequest();
            xhr.addEventListener("load",loadHandler);
            xhr.open("GET","http://127.0.0.1:4010/"+type+"?"+data);
            xhr.send();
        }
        function loadHandler(e){ 
            // console.log(e)
            var xhr=e.currentTarget;
            xhr.removeEventListener("load",loadHandler);
            console.log(xhr.responseURL.trim().split("?"))
            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);
            switch(type){
                case "project":
                    dataList=o;
                    return createList(o);
                    break;
                case "city":
                    return cityList(o);
                    break;
                case "district":
                    return districtList(o);
                    break;
            }
        }

        function createList(data){  //渲染数据
            // console.log(data);
            let str="";
            for(let i=0;i<data.length;i++){
                str+=`
                    <option value="${data[i].cityId}">${data[i].province}</option>
                `
            }
            province.addEventListener("change",changeHandler);
            province.innerHTML=str;
            ajax("city",province.value);
        }

        function cityList(data){
            let str="";
            for(let i=0;i<data.city.length;i++){
                const cityName=data.city;
                const districtId=data.districtId;
                str+=`
                    <option value="${districtId[i]}">${cityName[i]}</option>
                `
                // console.log(str)
            }
            city.innerHTML=str;
            city.addEventListener("change",changeHandler);
            // districtList(data);
            ajax("district",city.value);
        }
        
        function districtList(data){
            let str="";
            for(let i=0;i<data.district.length;i++){
                const districtName=data.district;
                str+=`
                    <option value="">${districtName[i]}</option>
                `
            }
            district.innerHTML=str;
        }
        
        function changeHandler(e){
            // console.log(e.target)
            if(e.target.id==="province"){
                ajax("city",e.target.value);
            }
            if(e.target.id==="city"){
                ajax("district",e.target.value);  
            }
        }

服务端

var http=require("http");
var querystring=require("querystring");
var projectList=[
    {id:101,province:"北京",cityId:[1001]},
    {id:102,province:"安徽省",cityId:[1002]},
    {id:103,province:"浙江省",cityId:[1003]},
]
var cityList=[
    {id:1001,city:["北京市"],districtId:[10001]},
    {id:1002,city:["宣城市","芜湖市","黄山市"],districtId:[10002,10003,10004]},
    {id:1003,city:["杭州市","温州市","嘉兴市"],districtId:[10005,10006,10007]}
]
var districtList=[
    {id:10001,district:["昌平区","海淀区","朝阳区"]},
    {id:10002,district:["宣州区","郎溪县","绩溪县"]},
    {id:10003,district:["芜湖县","弋江区","湾沚区"]},
    {id:10004,district:["屯溪区","黄山区","徽州区"]},
    {id:10005,district:["江干区","下城区","拱墅区"]},
    {id:10006,district:["鹿城区","龙湾区","瓯海区"]},
    {id:10007,district:["南湖区","秀洲区"]}
]
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(){
        // type是接口名称
        var type=req.url.trim().split("?")[0].replace(/\//g,"");
        if(req.method.toLowerCase()==="get"){
            if(req.url.includes("favicon.ico")) return res.end();//如果get请求的是图标直接返回空跳出
            // 如果是get请求，就从url中重新获取数据存入data变量
            data=req.url.includes("?") ? req.url.split("?")[1] : "";
        }
        // 首先判断是否可以通过JSON解析，如果通过JSON直接转换，如果不能就是querystring解析
        try{
            data=JSON.parse(data);
        }catch(e){
            data=data ? querystring.parse(data) : {};
        }
        var o={}
        switch(type){
            case "project":
                o=projectList;
                break;
            case "city":
                for(let i=0;i<cityList.length;i++){
                    if(cityList[i].id===data) o=cityList[i];
                }
                break;
            case "district":
                for(let i=0;i<districtList.length;i++){
                    console.log(districtList[i]);
                    if(districtList[i].id===data) o=districtList[i];
                }
                break;
        }
        res.write(JSON.stringify(o));
        res.end();
    })
});
server.listen(4010,"127.0.0.1",function(){
    console.log("服务器开启成功");
    // console.log(data)
})