摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)</title>
</head>
<body>
?。?lt;select name="" id="pro"></select>
市：<select name="" id="city"></select>
區(qū)縣：<select name="" id="area"></select>
<!-- 通過(guò)span標(biāo)簽來(lái)實(shí)現(xiàn)數(shù)據(jù)雙向綁定 -->
<!-- <span id="addr1"></span>
<span id="addr2"></span>
<span id="addr3"></span> -->
<!-- 通過(guò)dom操作來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定 -->
<p id="addr"></p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
$.getJSON('1.json',function(data){
let option='<option value="">選擇(省)</option>'
$.each(data,function(i){
option+='<option value="'+data[i].proId+'">'+data[i].proName+'</option>'
})
//將拼接好的html代碼添加到option中
$('#pro').html(option);
});
$('#pro').change(function(){
console.log($(this).find(':selected').text());//查看當(dāng)前選擇省的名稱(chēng)
//$('#addr1').html($(this).find(':selected').text());
let pro=$(this).find(':selected').text();
$('#addr').html(pro);
$.getJSON('2.json',function(data){
let option='<option value="">選擇(市)</option>'
$.each(data,function(i){
if(data[i].proId==$('#pro').val()){
option+='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
})
$('#city').html(option);
});
});
$('#city').change(function(){
console.log($(this).find(':selected').text());//查看當(dāng)前選擇市的名稱(chēng)
//$('#addr2').html($(this).find(':selected').text());
let city=$(this).find(':selected').text()
$('#addr').append(' '+city);
$.getJSON('3.json',function(data){
let option='<option value="">選擇(區(qū)縣)</option>'
$.each(data,function(i){
if(data[i].cityId==$('#city').val()){
option+='<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
})
$('#area').html(option);
});
});
$('#area').change(function(){
console.log($(this).find(':selected').text());//查看當(dāng)前選擇區(qū)縣的名稱(chēng)
//$('#addr3').html($(this).find(':selected').text());
let area=$(this).find(':selected').text()
$('#addr').append(' '+area);
});
});
</script>
</html>
章節(jié)總結(jié)：
Load()方法：
1. load方法是jquery中最簡(jiǎn)單的ajax請(qǐng)求方法，默認(rèn)為GET請(qǐng)求方式
2. 語(yǔ)法：load(url[,data,callback])，load(請(qǐng)求的url地址，請(qǐng)求數(shù)據(jù)，請(qǐng)求成功后的回調(diào)函數(shù)；
（1）url:請(qǐng)求的服務(wù)器上的資源股的url地址，可以是一個(gè)txt,html,php等.
（2）data:
GET請(qǐng)求：無(wú)參數(shù)或是名值對(duì)格式字符串；
POST請(qǐng)求：對(duì)象或數(shù)組；
(3) function(data,statuStr,xhr),function(響應(yīng)文本，狀態(tài)字符串(success),xhr對(duì)象
3. 調(diào)用：該方法需要在jquery對(duì)象上調(diào)用，回調(diào)適用于jauery集合中每一元素，
4. 優(yōu)點(diǎn)：
（1）自動(dòng)判斷請(qǐng)求類(lèi)型是GET還是POST；
(2) 可直接將load()返回值作為DOM元素內(nèi)容自動(dòng)插入，省去了sppend()等DOM操作
5 返回：響應(yīng)的內(nèi)容；
$.get()函數(shù)
1.$.get()用于從服務(wù)器上獲取數(shù)據(jù)
2.語(yǔ)法：$.get(url[,data][,callback][,dataType])
3.url：服務(wù)上的url地址為空，表示當(dāng)前的地址；
4.data:
(1)查詢(xún)字符串格式：name=peter&password=888;
(2)對(duì)象字面量{name:peter,password:888};自動(dòng)序列化上面的查詢(xún)字符串
5.callback:請(qǐng)求成功的回調(diào)函數(shù)，function(響應(yīng)文本,狀態(tài)字符串,xhr對(duì)象)如果不需要回調(diào)，可設(shè)為空(null);
6.dataType:響應(yīng)內(nèi)容類(lèi)型|應(yīng)答消息體，html/txt/xml/json/script/jsonp;
7.返回值：返回xhr對(duì)象；
$.getJSON()函數(shù)
1 $.getJSON()專(zhuān)用于解析從服務(wù)器上返回的json格式的內(nèi)容；
2 其實(shí)他就是$get()函數(shù)中，將返回?cái)?shù)據(jù)類(lèi)型dataType設(shè)置為'json'類(lèi)型的簡(jiǎn)寫(xiě)函數(shù)
3 $.getJSON()需要讀取json格式的數(shù)據(jù)，在實(shí)際開(kāi)發(fā)中從接口中獲取
$.getScript()函數(shù)
1. $.getScript()函數(shù)用來(lái)動(dòng)態(tài)加載外部的javascript腳本文件
2. $.getScript(腳本地址,回調(diào)函數(shù))
3. 可以任何位置加載外部腳本
$.POST()函數(shù)
1. $.post()用于向服務(wù)器發(fā)送大量的，敏感的信息(信息在消息體中而非url地址中)
2. $.post(url[,data][,callback][,dataType]),參數(shù)與$.get()相同
3. url: http請(qǐng)求的url處理程序；
4. data:消息體中的數(shù)據(jù)，以查詢(xún)字符串或?qū)ο笞置媪啃问教峁?/p>
5. callback:成功后的回調(diào)方法，function(data,status,xhr){...};
6. dataType:期望服務(wù)器響應(yīng)返回的數(shù)據(jù)格式，如html，json,test,xml,_default等
$.Ajax()
1. load(),$.get(),$.getJSON(),$getScript(),$.post()其實(shí)都是$.Ajax()的快捷方式
2. $.Ajax()的參數(shù)是一個(gè)對(duì)象，鍵名對(duì)應(yīng)的屬性非常多，并且鍵名不允許自定義，在js章節(jié)中已經(jīng)學(xué)過(guò)了
3. 盡管參數(shù)很多，但實(shí)際開(kāi)發(fā)中，經(jīng)常用到的并不多，有的參數(shù)用到了再查也不遲
4. 常用的屬性：
(1). url :請(qǐng)求的url資源地址
(2). type :請(qǐng)求的類(lèi)型，get/post;
(3). data: 發(fā)送的參數(shù)
(4). dataType: 響應(yīng)的數(shù)據(jù)類(lèi)型；
(5). success：響應(yīng)成功的回調(diào)方法
5. 該方法是jQuery中Ajax的底層實(shí)現(xiàn)，前面的方法或函數(shù)其實(shí)都在他基礎(chǔ)實(shí)現(xiàn)的功能封裝；
批改老師：韋小寶批改時(shí)間：2019-02-28 13:06:12
老師總結(jié)：總結(jié)的很到位 城市三級(jí)聯(lián)動(dòng)還是蠻有邏輯性的