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

本文來自部落格園，作者：農碼一生，轉載請注明原文連結：https://www.cnblogs.com/wml-it/p/15810970.html

技術的發展日新月異，随着時間推移，無法保證本部落格所有内容的正确性。如有誤導，請大家見諒，歡迎評論區指正！ 個人開源代碼連結: GitHub:

https://github.com/ITMingliang

Gitee:

https://gitee.com/mingliang_it

GitLab:

https://gitlab.com/ITMingliang

進開發學習交流群：

Ajax實作省市區三級關聯案例

繼續閱讀

VUE 父元件調用子元件函數的方法重點

為JSON 資料加入斜杠 \

幾個常用的Ajax庫小節

ASP.NET2.0下使用AJAX調用Webservice的方法

jQuery實作Ajax通訊的幾種常用方式

SpringMVC 與 Json實作資料互動

Spring MVC+Ajax建立執行個體

jquery,ajax,jsonp例子+springmvc背景

SpringMVC(六) | 前後端互動之ajax與jsonjsonajax

SpringMVC之ajax異步互動

SpringMvc與前端互動的資料轉遞（ajax）一、text類型資料二、json類型資料

PHP基礎入門，簡單實作前端後端互動<?php?>、echo變量及區分單雙引号建立數組、echo、print_r()、var_dump()差別二維數組常見資料類型及調用函數自定義函數http協定常用請求方式及在php中的用法網頁和伺服器簡單互動案例

jqGrid的使用筆記：5. 事件

JSON的三種解析方式JSON的三種解析方式一、什麼是JSON？二、JSON解析之傳統的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON總結：

django短信驗證碼的後端實作

前後端分離之跨域問題