三级及联的实现

最新推荐文章于 2022-06-01 21:46:08 发布

杂草茹

最新推荐文章于 2022-06-01 21:46:08 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/qq_40187274/article/details/109698073

版权

一、服务器

var http=require("http");
var querystring=require("querystring");
var provinceList=[//省
    {id:101,provincename:"北京",county:[1001]},
    {id:102,provincename:"上海",county:[1002]},
    {id:102,provincename:"天津",county:[1003]}
]
var countyList=[
    {id:1001,countyname:"北京市",district:[10001,10002]},
    {id:1002,countyname:"上海市",district:[10003,10004]},
    {id:1003,countyname:"天津市",district:[10003,10004]},
]
var districtList=[
    {id:10001,districtname:"海淀区"},
    {id:10002,districtname:"昌平区"},
    {id:10003,districtname:"河东区"},
    {id:10004,districtname:"河西区"}
]
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 "province":
                o.provinceList=provinceList;
                o.countyList=countyList;
                o.districtList=districtList;
                break;
            case "county":
                // console.log(data);
                var arr=countyList.reduce((value,item)=>{
                   if(item.id==data.countyId) value=item.district;//拿到district列表
                   return value; 
                } ,null);
                // console.log(arr);
                var list=districtList.filter(item=>{//筛选与数组相同的
                    return arr.includes(item.id);
                });
                // console.log(list);
                o=list.map(item=>{
                    return {id:item.id,districtname:item.districtname};
                });
                break;
            case "district":
                list=districtList.filter(item=>{//筛选与数组相同的
                    return data.districtId.includes(item.id);
                });
                o=list[0].id;
                break;
        }
        console.log(o,req.method);
        res.write(JSON.stringify(o));
        res.end();
    })
});
server.listen(4012,"10.9.72.244",function(){
    console.log("服务开启");
})

二、页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/a.css">

</head>

<body>
    <!-- <div id="province" class="clear"></div>
    <div id="preform" class="clear"></div>
    <div id="priceCon" class="clear"></div> -->
    
        <select name="" id="province">
        </select>
        <select name="" id="county">
        </select>
        <select name="" id="district">
        </select>
    <script type="module">
        import Tab from "./js/Tab.js";
        import QueryString from "./js/QueryString.js"

        var dataList,priceId,perform;
        init();
        function init() {
            ajax("province")//获取当前所有项目列表
        }
        function ajax(type, data) {
            if(data==undefined) data="";
            data=QueryString.stringify(data);
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", loadHanderl);
            xhr.open("GET", "http://10.9.72.244:4012/"+type+"/?"+data);
            xhr.send();
        }

        function loadHanderl(e) {
            
            var xhr=e.currentTarget;//XMLHttpRequest事件
            console.log(xhr.response);
            // console.log(xhr);
            // 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);//获得解析好的dom对象
            switch(type){
                case "province":
                    dataList=o;
                    console.log(o);
                   return createList(o);
                case "county":
                    return updatePriceList(o);
                case "district":
                    console.log(xhr.response); 
             }

        }
        
        function createList(data){
            for(var i=0;i<data.provinceList.length;i++){
                var tab=new Tab(data.provinceList[i],"province",data.provinceList[i].provincename);
                console.log(tab);
                tab.appendTo("#province");
                tab.addEventListener("change",changeHandler);
                if(i===0) tab.setSelected();
            }
        }

        function changeHandler(e){
            if(e.data.provincename){
                updatePerform(e.data.county);
            }else if(e.data.countyname){
                updatePriceList(e.data.district)
            }
        }

        function updatePerform(idList){
            console.log(idList,dataList);
            var list=dataList.countyList.filter(item=>{
                return idList.includes(item.id);
            });
            // console.log(list);
            var county=document.querySelector("#county");
            county.innerHTML="";
            list.forEach((item,index)=>{
                console.log(item);
                var tab=new Tab(item,"county",item.countyname);
            //     console.log(tab);
                tab.addEventListener("change",changeHandler);
                tab.appendTo(county);
                if(index===0)tab.setSelected();
                
            })
        }
        function updatePriceList(data){
            console.log(data);
            var district=document.querySelector("#district");
            district.innerHTML="";
            console.log(data,dataList);
            var list=dataList.districtList.filter(item=>{
                return data.includes(item.id);
            });
            console.log(list);
            list.forEach((item,index)=>{
                var tab=new Tab(item,"district",item.districtname);
                console.log(tab);
                tab.addEventListener("change",changeHandler);
                tab.appendTo(district);
                if(index===0)tab.setSelected();
                
            })

        }
        
       
    </script>
</body>

</html>

三、项目列表接口

## URL :http://10.9.72.244:4011
## Method:GET
## DataType：
        请求消息:QueryString
        响应请求:JSON

## 接口名称
    http://10.9.72.244:4011/province/
    http://10.9.72.244:4011/county/
    http://10.9.72.244:4011/district/

### 获取省及市的信息
接口名:province
请求：无请求
响应：{
    provinceList:[
        {id:"省id",
        provincename:"省",
        county:[市id数组]}
    ...
],
    countyList:[
    {id:"市id",
    countyname:"市",
    district:[区id数组]}
    ...
],
    districtList:[
    {id:"区id",
    districtname:"区"}
    ...
]
}
### 获取市及区的信息
接口名:county
请求：countyid=1001
响应：{
     districtList:[
    {id:"区id",
    districtname:"区"}
    ...
]
}
### 获取区的信息
接口名:district
请求：districtid=10001
响应：{
    districtname:"区"
}

杂草茹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三级及联的实现

一、服务器var http=require("http");var querystring=require("querystring");var provinceList=[//省 {id:101,provincename:"北京",county:[1001]}, {id:102,provincename:"上海",county:[1002]}, {id:102,provincename:"天津",county:[1003]}]var countyList=[ {i
复制链接

扫一扫