Ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)例代碼

更新時(shí)間：2022年04月26日 09:23:56 作者：農(nóng)碼一生

這篇文章介紹了Ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市區(qū)三級(jí)聯(lián)動(dòng)</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>請(qǐng)選擇省份</option> -->
            </select>
        </div>
        <div class="form-group">
            <select type="text" class="form-control" id="city">
                <option>請(qǐng)選擇城市</option>
            </select>
        </div>
        <div class="form-group">
            <select type="text" class="form-control" id="area">
                <option>請(qǐng)選擇縣區(qū)</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>請(qǐng)選擇省份</option>
        {{each province}}
        <!-- $value:循環(huán)過(guò)程中的當(dāng)前項(xiàng) -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <!-- 市模板 -->
    <script type="text/html" id="cityTpl">  
        <option>請(qǐng)選擇城市</option>
        {{each city}}
        <!-- $value:循環(huán)過(guò)程中的當(dāng)前項(xiàng) -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
     <!-- 縣區(qū)模板 -->
     <script type="text/html" id="areaTpl">  
        <option>請(qǐng)選擇縣區(qū)</option>
        {{each area}}
        <!-- $value:循環(huán)過(guò)程中的當(dāng)前項(xiàng) -->
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    
    <script>  

    //獲取省市區(qū)下拉元素
    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); 
            //將服務(wù)器端返回的數(shù)據(jù)和html進(jìn)行拼接
            // 第一個(gè)參數(shù)為模板id,第二個(gè)參數(shù)為服務(wù)器返回的數(shù)據(jù)
            var html = template('provinceTpl',{province:data});//province為上面的each對(duì)象，必須一致 
            // console.log(html);
            //將拼接好的字符串html顯示到頁(yè)面中
            province.innerHTML=html;
        }

    });
    //為省份的下拉框添加值改變事件
    province.onchange=function(){
        //獲取省份的id
        var pid=this.value;
        //清空縣區(qū)下拉框中的數(shù)據(jù)
        var html=template('areaTpl',{area:[]});
        area.innerHTML=html;
        //根據(jù)省份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;
            }
        }
        );
    }

    //為市的下拉框添加值改變時(shí)事件
    city.onchange=function(){
        //獲取城市id
        var cid=this.value;
        //根據(jù)城市id獲取縣區(qū)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){
           
    //定義默認(rèn)
    var defaults ={
        type:'get',
        url:'',
        data:{},
        Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
        success:function(){},
        error:function(){}
    };
    //用options中的對(duì)象覆蓋defaults中對(duì)象
    Object.assign(defaults,options);
    //創(chuàng)建
    var xhr= new XMLHttpRequest();
    //拼接請(qǐng)求參數(shù)變量
    var params='';
    //循環(huán)用戶傳遞進(jìn)來(lái)的對(duì)象格式參數(shù)
    for(var attr in defaults.data){
        //將參數(shù)轉(zhuǎn)換成字符串格式
        params+= attr +'='+ defaults.data[attr] +'&';
    }
    //字符串截取，將最后的&截取掉
    params= params.substr(0,params.length -1);

    //判斷請(qǐng)求方式
    if(defaults.type=='get'){
        defaults.url=defaults.url +'?'+ params;
    }

    //配置
    xhr.open(defaults.type,defaults.url);
    //發(fā)送請(qǐng)求
    if(defaults.type=='post'){
        //用戶期望的向服務(wù)端傳遞的請(qǐng)求參數(shù)類(lèi)型
        var contentType=defaults.Headers['Content-Type'];
        //post請(qǐng)求時(shí)必須設(shè)置的
        xhr.setRequestHeader('Content-Type',contentType);
        //判斷請(qǐng)求參數(shù)類(lèi)型
        if(contentType=='application/json'){
            xhr.send(JSON.stringify(defaults.data));
        }else{
            xhr.send(JSON.stringify(params));
        }
        
    }else{                
        xhr.send();
    }

    //監(jiān)聽(tīng)onload事件,當(dāng)接收完響應(yīng)數(shù)據(jù)后觸發(fā)
    xhr.onload=function(){
    //xhr.getResponseHeader()
    //獲取響應(yīng)頭部數(shù)據(jù)
    var contentType=xhr.getResponseHeader('Content-Type');
    //服務(wù)端返回的數(shù)據(jù)
    var responseText=xhr.responseText;
    if(contentType.includes('application/json')){
        //把JSON字符串轉(zhuǎn)換為JSON 對(duì)象
        responseText = JSON.parse(responseText);
    }

    //對(duì)http狀態(tài)碼判斷，判斷是否等于200
    if(xhr.status==200){
        //調(diào)用處理成功情況的函數(shù)
        defaults.success(responseText,xhr);
    }else{
        //調(diào)用處理失敗的情況函數(shù)
        defaults.error(responseText,xhr);
    }       
    
    }
}

服務(wù)器端測(cè)試代碼：

/**** server.js ****/
// 一個(gè)簡(jiǎn)單的后端路由

//1.引入express框架
const express=require('express');

const fs=require('fs');

//2.引入路徑處理模塊
const path=require('path');
const bodyParser=require('body-parser');//post

//3.創(chuàng)建web服務(wù)器
const app=express();

//post
//extended:返回的對(duì)象是一個(gè)鍵值對(duì)，當(dāng)extended為false的時(shí)候，鍵值對(duì)中的值就為'String'或'Array'形式，為true的時(shí)候，則可為任何數(shù)據(jù)類(lèi)型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());

//4.靜態(tài)資源訪問(wèn)服務(wù)器功能
app.use(express.static(path.join(__dirname,'public')));


//5.配置路由 request 請(qǐng)求   response 響應(yīng),回應(yīng)

//get路由 ，對(duì)應(yīng) province
app.get('/province',(request,response)=>{
    //響應(yīng)
    var data= new Array({id:1,name:"黑龍江省"},{id:2,name:"四川省"},{id:3,name:"河北省"},{id:4,name:"安徽省"});
    response.send(data)
});

//get路由 ，對(duì)應(yīng) cities
app.get('/cities',(request,response)=>{
    //響應(yīng)
    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:"綿陽(yáng)市"},{id:203,name:"德陽(yáng)市"},{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:"阜陽(yáng)市"},{id:405,name:"其他市"});
		response.send(data)
	} 
});


//get路由 ，對(duì)應(yīng) areas
app.get('/areas',(request,response)=>{
   //響應(yīng)
   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:"泰來(lái)縣"},{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)
    } 
// 其他城市的就不寫(xiě)進(jìn)行測(cè)試了，實(shí)際項(xiàng)目中還維護(hù)到數(shù)據(jù)庫(kù)中，然后從數(shù)據(jù)庫(kù)查詢(xún)帶出
});



//6.監(jiān)聽(tīng)端口,進(jìn)行回調(diào)
app.listen(3000,(err)=>{
    // 函數(shù)體
    if(!err) {
        console.log('測(cè)試ajax請(qǐng)求的服務(wù)器開(kāi)啟成功了!');
        console.log('正在監(jiān)聽(tīng)3000端口...........');
    }
});

到此這篇關(guān)于Ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: