Ajax實現(xiàn)省市區(qū)三級聯(lián)動實例代碼
更新時間：2022年04月26日 09:23:56 作者：農(nóng)碼一生
這篇文章介紹了Ajax實現(xiàn)省市區(qū)三級聯(lián)動的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市區(qū)三級聯(lián)動</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>請選擇縣區(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>請選擇省份</option>
{{each province}}
<!-- $value:循環(huán)過程中的當(dāng)前項 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 市模板 -->
<script type="text/html" id="cityTpl">
<option>請選擇城市</option>
{{each city}}
<!-- $value:循環(huán)過程中的當(dāng)前項 -->
<option value="{{$value.id}}">{{$value.name}}</option>
{{/each}}
</script>
<!-- 縣區(qū)模板 -->
<script type="text/html" id="areaTpl">
<option>請選擇縣區(qū)</option>
{{each area}}
<!-- $value:循環(huán)過程中的當(dā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進行拼接
// 第一個參數(shù)為模板id,第二個參數(shù)為服務(wù)器返回的數(shù)據(jù)
var html = template('provinceTpl',{province:data});//province為上面的each對象，必須一致
// console.log(html);
//將拼接好的字符串html顯示到頁面中
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;
}
}
);
}
//為市的下拉框添加值改變時事件
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中的對象覆蓋defaults中對象
Object.assign(defaults,options);
//創(chuàng)建
var xhr= new XMLHttpRequest();
//拼接請求參數(shù)變量
var params='';
//循環(huán)用戶傳遞進來的對象格式參數(shù)
for(var attr in defaults.data){
//將參數(shù)轉(zhuǎn)換成字符串格式
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);
//發(fā)送請求
if(defaults.type=='post'){
//用戶期望的向服務(wù)端傳遞的請求參數(shù)類型
var contentType=defaults.Headers['Content-Type'];
//post請求時必須設(shè)置的
xhr.setRequestHeader('Content-Type',contentType);
//判斷請求參數(shù)類型
if(contentType=='application/json'){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(JSON.stringify(params));
}
}else{
xhr.send();
}
//監(jiān)聽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 對象
responseText = JSON.parse(responseText);
}
//對http狀態(tài)碼判斷，判斷是否等于200
if(xhr.status==200){
//調(diào)用處理成功情況的函數(shù)
defaults.success(responseText,xhr);
}else{
//調(diào)用處理失敗的情況函數(shù)
defaults.error(responseText,xhr);
}
}
}服務(wù)器端測試代碼：
/**** server.js ****/
// 一個簡單的后端路由
//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:返回的對象是一個鍵值對，當(dāng)extended為false的時候，鍵值對中的值就為'String'或'Array'形式，為true的時候，則可為任何數(shù)據(jù)類型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());
//4.靜態(tài)資源訪問服務(wù)器功能
app.use(express.static(path.join(__dirname,'public')));
//5.配置路由 request 請求 response 響應(yīng),回應(yīng)
//get路由 ，對應(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路由 ，對應(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:"綿陽市"},{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路由 ，對應(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:"泰來縣"},{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)
}
// 其他城市的就不寫進行測試了，實際項目中還維護到數(shù)據(jù)庫中，然后從數(shù)據(jù)庫查詢帶出
});
//6.監(jiān)聽端口,進行回調(diào)
app.listen(3000,(err)=>{
// 函數(shù)體
if(!err) {
console.log('測試ajax請求的服務(wù)器開啟成功了!');
console.log('正在監(jiān)聽3000端口...........');
}
});到此這篇關(guān)于Ajax實現(xiàn)省市區(qū)三級聯(lián)動的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript框架(iframe)操作,介紹了種情況下的操作方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了javascript常見數(shù)據(jù)驗證插件大全,需要的朋友可以參考下2015-08-08
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設(shè)計系列之按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript文件是一個文本類型的文件,在任何文本編輯器中都可以被打開和編輯,JavaScript文件的擴展名為js,這篇文章主要給大家介紹了關(guān)于js文件中引入另一個js文件的4種方法總結(jié),需要的朋友可以參考下2023-12-12
在JavaScript中遇到處理錯誤很讓人頭疼，這篇文章整理了JavaScript錯誤處理實踐，有需要的小伙伴們可以參考。2016-07-07
這篇文章主要介紹了JavaScript獲得指定對象大小的方法,涉及javascript針對元素遍歷與屬性操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js實現(xiàn)不提交表單獲取單選按鈕值的方法,涉及javascript鼠標(biāo)事件及頁面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
想必大家對Function.prototype.bind并不陌生吧，下面為大家介紹下它的簡單調(diào)用及DOM調(diào)用，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了JS實現(xiàn)超炫網(wǎng)頁煙花動畫效果的方法,實例分析了javascript實現(xiàn)煙花動畫效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本篇文章主要是對JS獲取地址欄參數(shù)的幾種方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02