Ajax实现省市区三级联动实例代码

   
 
 
  
  请选择城市
  请选择县区

function ajax(options){ //定义默认 var defaults ={ type:'get', url:'', data:{}, Headers:{'Content-Type': 'application/x-www-form-urlencoded'}, success:function(){}, error:function(){} }; //用options中的对象覆盖defaults中对象 Object.assign(defaults,options); //创建 var xhr= new XMLHttpRequest(); //拼接请求参数变量 var params=''; //循环用户传递进来的对象格式参数 for(var attr in defaults.data){ //将参数转换成字符串格式 params+= attr +'='+ defaults.data[attr] +'&'; } //字符串截取，将最后的&截取掉 params= params.substr(0,params.length -1); //判断请求方式 if(defaults.type=='get'){ defaults.url=defaults.url +'?'+ params; } //配置 xhr.open(defaults.type,defaults.url); //发送请求 if(defaults.type=='post'){ //用户期望的向服务端传递的请求参数类型 var contentType=defaults.Headers['Content-Type']; //post请求时必须设置的 xhr.setRequestHeader('Content-Type',contentType); //判断请求参数类型 if(contentType=='application/json'){ xhr.send(JSON.stringify(defaults.data)); }else{ xhr.send(JSON.stringify(params)); } }else{ xhr.send(); } //监听onload事件,当接收完响应数据后触发 xhr.onload=function(){ //xhr.getResponseHeader() //获取响应头部数据 var contentType=xhr.getResponseHeader('Content-Type'); //服务端返回的数据 var responseText=xhr.responseText; if(contentType.includes('application/json')){ //把JSON字符串转换为JSON 对象 responseText = JSON.parse(responseText); } //对http状态码判断，判断是否等于200 if(xhr.status==200){ //调用处理成功情况的函数 defaults.success(responseText,xhr); }else{ //调用处理失败的情况函数 defaults.error(responseText,xhr); } } }

/**** server.js ****/ // 一个简单的后端路由 //1.引入express框架 const express=require('express'); const fs=require('fs'); //2.引入路径处理模块 const path=require('path'); const bodyParser=require('body-parser');//post //3.创建web服务器 const app=express(); //post //extended:返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。 //解析urlencoded app.use(bodyParser.urlencoded({extended: false})); //解析json app.use(bodyParser.json()); //4.静态资源访问服务器功能 app.use(express.static(path.join(__dirname,'public'))); //5.配置路由 request 请求   response 响应,回应 //get路由 ，对应 province app.get('/province',(request,response)=>{ //响应 var data= new Array({id:1,name:"黑龙江省"},{id:2,name:"四川省"},{id:3,name:"河北省"},{id:4,name:"安徽省"}); response.send(data) }); //get路由 ，对应 cities app.get('/cities',(request,response)=>{ //响应 const id = request.query.id; var data= new Array(); if (id == 1) { data =new Array({id:101,name:"哈尔滨市"},{id:102,name:"齐齐哈尔市"},{id:103,name:"牡丹江市"},{id:104,name:"佳木斯市"},{id:105,name:"其他市"}); response.send(data) } else if(id == 2) { data =new Array({id:201,name:"成都市"},{id:202,name:"绵阳市"},{id:203,name:"德阳市"},{id:204,name:"攀枝花市"},{id:205,name:"其他市"}); response.send(data) } else if(id == 3) { data =new Array({id:301,name:"河北市"},{id:302,name:"石家庄市"},{id:303,name:"唐山市"},{id:304,name:"保定市"},{id:305,name:"其他市"}); response.send(data) } else if(id == 4) { data =new Array({id:401,name:"合肥市"},{id:402,name:"滁州市"},{id:403,name:"宿州市"},{id:404,name:"阜阳市"},{id:405,name:"其他市"}); response.send(data) } }); //get路由 ，对应 areas app.get('/areas',(request,response)=>{ //响应 const id = request.query.id; var data= new Array(); if (id == 101) { data =new Array({id:1011,name:"依兰县"},{id:1012,name:"方正县"},{id:1013,name:"宾县"},{id:1014,name:"木兰县"},{id:1015,name:"其他县"}); response.send(data) } else if(id == 102) { data =new Array({id:1021,name:"龙江县"},{id:1022,name:"依安县"},{id:1023,name:"泰来县"},{id:1024,name:"拜泉县"},{id:1025,name:"其他县"}); response.send(data) } else if(id == 103) { data =new Array({id:1031,name:"林口县"},{id:1032,name:"其他县"}); response.send(data) } else if(id == 104) { data =new Array({id:1041,name:"桦南县"},{id:1042,name:"桦川县"},{id:1043,name:"其他县"}); response.send(data) } else if(id == 105) { data =new Array({id:1051,name:"其他县"}); response.send(data) } // 其他城市的就不写进行测试了，实际项目中还维护到数据库中，然后从数据库查询带出 }); //6.监听端口,进行回调 app.listen(3000,(err)=>{ // 函数体 if(!err) { console.log('测试ajax请求的服务器开启成功了!'); console.log('正在监听3000端口...........'); } });