用ajax请求node服务数据,做省市县的三级联动

node服务

var http=require("http");
var querystring=require("querystring");
var datas={
"省1":{
	"市1":["县1","县2"],
	"市2":["县3","县4"]
}
"省2":{
	"市3":["县5","县6"],
	"市4":["县7","县8"]
}
//实际数据过多,用假数据代替
};
var server=http.createServer(function(req,res){
   var data="";
    res.writeHead(200,{
        "content-type":"text/html;charset=utf-8",
        "Access-Control-Allow-Origin":"*"
    });
    req.on("data",function(_data){
        data+=_data;
    });
    req.on("end",function(){
        var type=req.url.trim().split("?")[0].replace(/\//,"");
        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):{};
        }
        //把数据返回给客户端
        res.write(JSON.stringify(datas));
        res.end();
    })
})
server.listen(4005,"10.9.72.239",function(){
    console.log("服务已开启");
})

html和js(包含ajax部分)

<select name="province" id="province"></select>
<label for="province"></label>
<select name="city" id="city"></select>
<label for="province"></label>
<select name="county" id="county"></select>
<label for="province">县/区</label>
    <script>
        //获取select DOM元素
        var select1=document.querySelector("#province");
        var select2=document.querySelector("#city");
        var select3=document.querySelector("#county");
        var data;
        init();
        function init(){
            //给select添加事件
            select1.addEventListener("change",changeHandler);
            select2.addEventListener("change",changeHandler);
            select3.addEventListener("change",changeHandler);
            ajax("project");
        }
        //ajax请求数据
        function ajax(type){
            var xhr=new XMLHttpRequest();
            xhr.open("GET","http://10.9.72.239:4005/"+type);
            xhr.send();
            xhr.addEventListener("load",loadHandler);  
        }
        function loadHandler(e){
            //把请求的数据,变成全局的data变量
            data=JSON.parse(e.currentTarget.response);
            creatProvinceList();
        }
        function changeHandler(e){
            //根据改变的select是那个类型,决定生成新的列表(城市的,或者县区的)
            switch(e.target.id){
                case "province":
                creatCityList(e.target.value);
                break;
                case "city":
                creatCountyList(select1.value,e.target.value);
                break;
            }
        }
        function creatProvinceList(){//创建省份列表的函数
            var province=Object.keys(data);
            var d=document.createDocumentFragment();
            for(var i=0;i<province.length;i++){
                var p=document.createElement("option");
                p.textContent=province[i]
                d.appendChild(p);
            }
            
            select1.appendChild(d);
            //第一个省份预先被选中,根据省份,预先生成它的城市列表
            creatCityList(province[0]);
        }
        function creatCityList(p){//创建城市列表的函数
            var city=Object.keys(data[p]);
            var d=document.createDocumentFragment();
            for(var i=0;i<city.length;i++){
                var c=document.createElement("option");
                c.textContent=city[i];
                d.appendChild(c);
            }
            select2.innerHTML="";//加载新的城市列表,记得清空之前的
            select2.appendChild(d);
            //第一个城市预先被选中,根据省份,预先生成它的区县列表
            creatCountyList(select1.value,city[0]);
        }
        function creatCountyList(p,c){//创建区县列表的函数
            var county=data[p][c];
            var d=document.createDocumentFragment();
            for(var i=0;i<county.length;i++){
                var c=document.createElement("option");
                c.textContent=county[i]
                d.appendChild(c);
            }
            select3.innerHTML="";//记得清空之前的
            select3.appendChild(d);
        }

    </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值