abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax實現(xiàn)三級聯(lián)動</title>
</head>
<body>
?。?lt;select name="" id="pro"></select>
市：<select name="" id="city"></select>
區(qū)縣：<select name="" id="area"></select>
<!-- 通過span標(biāo)簽來實現(xiàn)數(shù)據(jù)雙向綁定 -->
<!-- <span id="addr1"></span>
<span id="addr2"></span>
<span id="addr3"></span> -->
<!-- 通過dom操作來實現(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)前選擇省的名稱
//$('#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)前選擇市的名稱
//$('#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ū)縣的名稱
//$('#addr3').html($(this).find(':selected').text());
let area=$(this).find(':selected').text()
$('#addr').append(' '+area);
});
});
</script>
</html>
章節(jié)總結(jié)：
Load()方法：
1. load方法是jquery中最簡單的ajax請求方法，默認(rèn)為GET請求方式
2. 語法：load(url[,data,callback])，load(請求的url地址，請求數(shù)據(jù)，請求成功后的回調(diào)函數(shù)；
（1）url:請求的服務(wù)器上的資源股的url地址，可以是一個txt,html,php等.
（2）data:
GET請求：無參數(shù)或是名值對格式字符串；
POST請求：對象或數(shù)組；
(3) function(data,statuStr,xhr),function(響應(yīng)文本，狀態(tài)字符串(success),xhr對象
3. 調(diào)用：該方法需要在jquery對象上調(diào)用，回調(diào)適用于jauery集合中每一元素，
4. 優(yōu)點：
（1）自動判斷請求類型是GET還是POST；
(2) 可直接將load()返回值作為DOM元素內(nèi)容自動插入，省去了sppend()等DOM操作
5 返回：響應(yīng)的內(nèi)容；
$.get()函數(shù)
1.$.get()用于從服務(wù)器上獲取數(shù)據(jù)
2.語法：$.get(url[,data][,callback][,dataType])
3.url：服務(wù)上的url地址為空，表示當(dāng)前的地址；
4.data:
(1)查詢字符串格式：name=peter&password=888;
(2)對象字面量{name:peter,password:888};自動序列化上面的查詢字符串
5.callback:請求成功的回調(diào)函數(shù)，function(響應(yīng)文本,狀態(tài)字符串,xhr對象)如果不需要回調(diào)，可設(shè)為空(null);
6.dataType:響應(yīng)內(nèi)容類型|應(yīng)答消息體，html/txt/xml/json/script/jsonp;
7.返回值：返回xhr對象；
$.getJSON()函數(shù)
1 $.getJSON()專用于解析從服務(wù)器上返回的json格式的內(nèi)容；
2 其實他就是$get()函數(shù)中，將返回數(shù)據(jù)類型dataType設(shè)置為'json'類型的簡寫函數(shù)
3 $.getJSON()需要讀取json格式的數(shù)據(jù)，在實際開發(fā)中從接口中獲取
$.getScript()函數(shù)
1. $.getScript()函數(shù)用來動態(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請求的url處理程序；
4. data:消息體中的數(shù)據(jù)，以查詢字符串或?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()其實都是$.Ajax()的快捷方式
2. $.Ajax()的參數(shù)是一個對象，鍵名對應(yīng)的屬性非常多，并且鍵名不允許自定義，在js章節(jié)中已經(jīng)學(xué)過了
3. 盡管參數(shù)很多，但實際開發(fā)中，經(jīng)常用到的并不多，有的參數(shù)用到了再查也不遲
4. 常用的屬性：
(1). url :請求的url資源地址
(2). type :請求的類型，get/post;
(3). data: 發(fā)送的參數(shù)
(4). dataType: 響應(yīng)的數(shù)據(jù)類型；
(5). success：響應(yīng)成功的回調(diào)方法
5. 該方法是jQuery中Ajax的底層實現(xiàn)，前面的方法或函數(shù)其實都在他基礎(chǔ)實現(xiàn)的功能封裝；
Correcting teacher：韋小寶Correction time：2019-02-28 13:06:12
Teacher's summary：總結(jié)的很到位 城市三級聯(lián)動還是蠻有邏輯性的