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ù)類型 var contentType=defaults.Headers['Content-Type']; //post請(qǐng)求時(shí)必須設(shè)置的 xhr.setRequestHeader('Content-Type',contentType); //判斷請(qǐng)求參數(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 對(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ù)類型。 //解析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) } // 其他城市的就不寫進(jìn)行測(cè)試了,實(shí)際項(xiàng)目中還維護(hù)到數(shù)據(jù)庫(kù)中,然后從數(shù)據(jù)庫(kù)查詢帶出 }); //6.監(jiān)聽端口,進(jìn)行回調(diào) app.listen(3000,(err)=>{ // 函數(shù)體 if(!err) { console.log('測(cè)試ajax請(qǐng)求的服務(wù)器開啟成功了!'); console.log('正在監(jiān)聽3000端口...........'); } });
到此這篇關(guān)于Ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- 使用PHP+MySql+Ajax+jQuery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能示例
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(封裝和不封裝兩種方式)
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果簡(jiǎn)單示例
- AJAX省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單(java版)
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
相關(guān)文章
javascript常見數(shù)據(jù)驗(yàn)證插件大全
這篇文章主要介紹了javascript常見數(shù)據(jù)驗(yàn)證插件大全,需要的朋友可以參考下2015-08-08js文件中引入另一個(gè)js文件的4種方法總結(jié)
JavaScript文件是一個(gè)文本類型的文件,在任何文本編輯器中都可以被打開和編輯,JavaScript文件的擴(kuò)展名為js,這篇文章主要給大家介紹了關(guān)于js文件中引入另一個(gè)js文件的4種方法總結(jié),需要的朋友可以參考下2023-12-12js實(shí)現(xiàn)不提交表單獲取單選按鈕值的方法
這篇文章主要介紹了js實(shí)現(xiàn)不提交表單獲取單選按鈕值的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08JS實(shí)現(xiàn)超炫網(wǎng)頁(yè)煙花動(dòng)畫效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)超炫網(wǎng)頁(yè)煙花動(dòng)畫效果的方法,實(shí)例分析了javascript實(shí)現(xiàn)煙花動(dòng)畫效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03