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

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <link rel="stylesheet"  href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
    <style type='text/css'>
        .container{
            padding-top: 150px;
        }
     </style>
</head>
<body>
    <div class='container'> 
    <div class="form-inline">
        <div class="form-group">
            <select type="text" class="form-control" id="province">
                <!-- <option>请选择省份</option> -->
            </select>
        </div>
        <div class="form-group">
            <select type="text" class="form-control" id="city">
                <option>请选择城市</option>
            </select>
        </div>
        <div class="form-group">
            <select type="text" class="form-control" id="area">
                <option>请选择县区</option>
            </select>
        </div>
    </div>
    </div>
    <script src="./js/ajax.js"> </script>
    <script src="./js/template-web.js"></script>

    <!-- 省份模板 -->
    <script type="text/html" id="provinceTpl">  
        <option>请选择省份</option>
        {{each province}}
        <!-- $value:循环过程中的当前项 -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <!-- 市模板 -->
    <script type="text/html" id="cityTpl">  
        <option>请选择城市</option>
        {{each city}}
        <!-- $value:循环过程中的当前项 -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
     <!-- 县区模板 -->
     <script type="text/html" id="areaTpl">  
        <option>请选择县区</option>
        {{each area}}
        <!-- $value:循环过程中的当前项 -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    
    <script>  

    //获取省市区下拉元素
    var province=document.getElementById('province');
    var city=document.getElementById('city');
    var area=document.getElementById('area');
    //1.获取省份信息
    ajax({
        type:'get',
        url:'http://localhost:3000/province',
        success:function(data){
            // console.log(data); 
            //将服务器端返回的数据和html进行拼接
            // 第一个参数为模板id,第二个参数为服务器返回的数据
            var html = template('provinceTpl',{province:data});//province为上面的each对象，必须一致 
            // console.log(html);
            //将拼接好的字符串html显示到页面中
            province.innerHTML=html;
        }

    });
    //为省份的下拉框添加值改变事件
    province.onchange=function(){
        //获取省份的id
        var pid=this.value;
        //清空县区下拉框中的数据
        var html=template('areaTpl',{area:[]});
        area.innerHTML=html;
        //根据省份id获取城市信息
        ajax({ 
            type:'get',
            url:'http://localhost:3000/cities',
            data:{
                id:pid
            },
            success:function(data){
                // console.log(data);
                var html = template('cityTpl',{city:data});
                city.innerHTML=html;
            }
        }
        );
    }

    //为市的下拉框添加值改变时事件
    city.onchange=function(){
        //获取城市id
        var cid=this.value;
        //根据城市id获取县区id
        ajax({
            type:'get',
            url:'http://localhost:3000/areas',
            data:{
                id:cid  
            },
            success:function(data){
                var html=template('areaTpl',{area:data});
                area.innerHTML=html;
            }

        });
    }
    </script>
</body>

</html>

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端口...........');
    }
});

频道导航

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

您可能感兴趣的文章: