使用 load() 方法異步請(qǐng)求數(shù)據(jù)
使用load()方法通過 Ajax 請(qǐng)求加載服務(wù)器中的數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中匀奏，它的調(diào)用格式為：
load(url,[data],[callback])
參數(shù) url 為加載服務(wù)器地址矢腻，可選項(xiàng) data 參數(shù)為請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)门驾，callback 參數(shù)為數(shù)據(jù)請(qǐng)求成功后，執(zhí)行的回調(diào)函數(shù)踏堡。
例如猎唁，點(diǎn)擊“加載”按鈕時(shí)咒劲，向服務(wù)器請(qǐng)求加載一個(gè)指定頁(yè)面的內(nèi)容顷蟆，加載成功后，將數(shù)據(jù)內(nèi)容顯示在<div>元素中腐魂，并將加載按鈕變?yōu)椴豢捎谜寿恕Ｈ缦聢D所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點(diǎn)擊“加載”按鈕時(shí)蛔屹，通過調(diào)用load()方法向服務(wù)器請(qǐng)求加載 fruit.html 文件中的內(nèi)容削樊，當(dāng)加載成功后，先顯示數(shù)據(jù)，并將按鈕變?yōu)椴豢捎谩?/p>
使用 getJSON() 方法異步加載 JSON 格式數(shù)據(jù)
使用getJSON()方法可以通過 Ajax 異步請(qǐng)求的方式漫贞，獲取服務(wù)器中的數(shù)據(jù)甸箱，并對(duì)獲取的數(shù)據(jù)進(jìn)行解析，顯示在頁(yè)面中迅脐，它的調(diào)用格式為：
jQuery.getJSON(url,[data],[callback]) 或 $.getJSON(url,[data],[callback])
其中芍殖，url 參數(shù)為請(qǐng)求加載 json 格式文件的服務(wù)器地址，可選項(xiàng) data 參數(shù)為請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)谴蔑，callback 參數(shù)為數(shù)據(jù)請(qǐng)求成功后豌骏，執(zhí)行的回調(diào)函數(shù)。
例如隐锭，點(diǎn)擊頁(yè)面中的“加載”按鈕窃躲，調(diào)用getJSON()方法獲取服務(wù)器中 JSON 格式文件中的數(shù)據(jù)，并遍歷數(shù)據(jù)钦睡，將指定的字段名內(nèi)容顯示在頁(yè)面中蒂窒。如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點(diǎn)擊“加載”按鈕時(shí)赎婚，通過getJSON()方法調(diào)用服務(wù)器中的 sport.json 文件刘绣，獲取返回的 data 文件數(shù)據(jù)，并遍歷該數(shù)據(jù)對(duì)象挣输，以data[“name”]取出數(shù)據(jù)中指定的內(nèi)容纬凤，顯示在頁(yè)面中。
使用 getScript() 方法異步加載并執(zhí)行js文件
使用getScript()方法異步請(qǐng)求并執(zhí)行服務(wù)器中的 JavaScript 格式的文件撩嚼，它的調(diào)用格式如下所示：
jQuery.getScript(url,[callback]) 或 $.getScript(url,[callback])
參數(shù) url 為服務(wù)器請(qǐng)求地址停士，可選項(xiàng) callback 參數(shù)為請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)。
例如完丽，點(diǎn)擊“加載”按鈕恋技，調(diào)用getScript()加載并執(zhí)行服務(wù)器中指定名稱的 JavaScript 格式的文件，并在頁(yè)面中顯示加載后的數(shù)據(jù)內(nèi)容逻族，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出蜻底，當(dāng)點(diǎn)擊“加載”按鈕調(diào)用getScript()方法加載服務(wù)器中的 JavaScript 格式文件后，自動(dòng)執(zhí)行文件代碼聘鳞，將數(shù)據(jù)內(nèi)容顯示在<ul>元素中薄辅。
使用 get() 方法以 GET 方式從服務(wù)器獲取數(shù)據(jù)
使用get()方法時(shí)，采用 GET 方式向服務(wù)器請(qǐng)求數(shù)據(jù)抠璃，并通過方法中回調(diào)函數(shù)的參數(shù)返回請(qǐng)求的數(shù)據(jù)站楚，它的調(diào)用格式如下：
$.get(url,[callback])
參數(shù) url 為服務(wù)器請(qǐng)求地址，可選項(xiàng) callback 參數(shù)為請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)搏嗡。
例如窿春，當(dāng)點(diǎn)擊“加載”按鈕時(shí)拉一，調(diào)用get()方法向服務(wù)器中的一個(gè) .php 文件以 GET 方式請(qǐng)求數(shù)據(jù)，并將返回的數(shù)據(jù)內(nèi)容顯示在頁(yè)面中旧乞，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出蔚润，通過$.get()方法向服務(wù)器成功請(qǐng)求數(shù)據(jù)后，在回調(diào)函數(shù)中通過 data 參數(shù)傳回請(qǐng)求的數(shù)據(jù)尺栖，并以 data.name 格式訪問數(shù)據(jù)中各項(xiàng)的內(nèi)容抽碌。
使用 post() 方法以 POST 方式從服務(wù)器發(fā)送數(shù)據(jù)
與get()方法相比，post()方法多用于以 POST 方式向服務(wù)器發(fā)送數(shù)據(jù)决瞳，服務(wù)器接收到數(shù)據(jù)之后货徙，進(jìn)行處理，并將處理結(jié)果返回頁(yè)面皮胡，調(diào)用格式如下：
$.post(url,[data],[callback])
參數(shù) url 為服務(wù)器請(qǐng)求地址痴颊，可選項(xiàng) data 為向服務(wù)器請(qǐng)求時(shí)發(fā)送的數(shù)據(jù)，可選項(xiàng) callback 參數(shù)為請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)屡贺。
例如蠢棱，在輸入框中錄入一個(gè)數(shù)字，點(diǎn)擊“檢測(cè)”按鈕甩栈，調(diào)用post()方法向服務(wù)器以 POST 方式發(fā)送請(qǐng)求泻仙，檢測(cè)輸入值的奇偶性，并顯示在頁(yè)面中量没，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出玉转，當(dāng)點(diǎn)擊“檢測(cè)”按鈕時(shí)，獲取輸入框中的值殴蹄，并將該值使用$.post()方法一起發(fā)送給服務(wù)器究抓，服務(wù)器接收該值后并進(jìn)行處理，最后返回處理結(jié)果袭灯。
使用 serialize() 方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進(jìn)行序列化刺下，生成標(biāo)準(zhǔn)URL編碼文本字符串，直接可用于ajax請(qǐng)求稽荧，它的調(diào)用格式如下：
$(selector).serialize()
其中 selector 參數(shù)是一個(gè)或多個(gè)表單中的元素或表單元素本身橘茉。
例如，在表單中添加多個(gè)元素姨丈，點(diǎn)擊“序列化”按鈕后畅卓，調(diào)用serialize()方法，將表單元素序列化后的標(biāo)準(zhǔn) URL 編碼文本字符串顯示在頁(yè)面中构挤，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出髓介，當(dāng)點(diǎn)擊“序列化”按鈕后惕鼓，調(diào)用表單元素本身的serialize()方法筋现，將表單中元素全部序列化，生成標(biāo)準(zhǔn) URL 編碼，各元素間通過&號(hào)相聯(lián)矾飞。
使用 ajax() 方法加載服務(wù)器數(shù)據(jù)
使用ajax()方法是最底層一膨、功能最強(qiáng)大的請(qǐng)求服務(wù)器數(shù)據(jù)的方法，它不僅可以獲取服務(wù)器返回的數(shù)據(jù)洒沦，還能向服務(wù)器發(fā)送請(qǐng)求并傳遞數(shù)值豹绪，它的調(diào)用格式如下：
jQuery.ajax([settings]) 或 $.ajax([settings])
其中參數(shù) settings 為發(fā)送 ajax 請(qǐng)求時(shí)的配置對(duì)象，在該對(duì)象中申眼，url表示服務(wù)器請(qǐng)求的路徑瞒津，data為請(qǐng)求時(shí)傳遞的數(shù)據(jù)，dataType為服務(wù)器返回的數(shù)據(jù)類型括尸，success為請(qǐng)求成功的執(zhí)行的回調(diào)函數(shù)巷蚪，type為發(fā)送數(shù)據(jù)請(qǐng)求的方式，默認(rèn)為get濒翻。
例如屁柏，點(diǎn)擊頁(yè)面中的“加載”按鈕，調(diào)用ajax()方法向服務(wù)器請(qǐng)求加載一個(gè) txt 文件有送，并將返回的文件中的內(nèi)容顯示在頁(yè)面淌喻，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點(diǎn)擊“加載”按鈕時(shí)雀摘，調(diào)用$.ajax()方法請(qǐng)求服務(wù)器中 txt 文件裸删，當(dāng)請(qǐng)求成功時(shí)調(diào)用 success 回調(diào)函數(shù)，獲取傳回的數(shù)據(jù)阵赠，并顯示在頁(yè)面中烁落。
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測(cè)數(shù)字的奇偶性</span>
<span class="fr">
<input id="btnCheck" type="button" value="檢測(cè)" />
</span>
</div>
<ul>
<li>請(qǐng)求輸入一個(gè)數(shù)字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url: "http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
dataType: "text",
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
},
type: "get"
});
})
});
</script>
</body>
使用 ajaxSetup() 方法設(shè)置全局 Ajax 默認(rèn)選項(xiàng)
使用ajaxSetup()方法可以設(shè)置 Ajax 請(qǐng)求的一些全局性選項(xiàng)值，設(shè)置完成后豌注，后面的 Ajax 請(qǐng)求將不需要再添加這些選項(xiàng)值伤塌，它的調(diào)用格式為：
jQuery.ajaxSetup([options]) 或 $.ajaxSetup([options])
可選項(xiàng) options 參數(shù)為一個(gè)對(duì)象，通過該對(duì)象設(shè)置 Ajax 請(qǐng)求時(shí)的全局選項(xiàng)值轧铁。
例如每聪，先調(diào)用ajaxSetup()方法設(shè)置全局的 Ajax 選項(xiàng)值，再點(diǎn)擊兩個(gè)按鈕齿风，分別使用ajax()方法請(qǐng)求不同的服務(wù)器數(shù)據(jù)药薯，并將數(shù)據(jù)內(nèi)容顯示在頁(yè)面，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出救斑，使用ajaxSetup()方法設(shè)置了 Ajax 請(qǐng)求時(shí)的一些全局性的配置選項(xiàng)后童本，在兩次調(diào)用 ajax 請(qǐng)求服務(wù)器txt文件時(shí)，只需要設(shè)置 url 地址即可脸候。
使用 ajaxStart() 和 ajaxStop() 方法
ajaxStart()和ajaxStop()方法是綁定 Ajax 事件穷娱。ajaxStart()方法用于在 Ajax 請(qǐng)求發(fā)出前觸發(fā)函數(shù)绑蔫，ajaxStop()方法用于在 Ajax 請(qǐng)求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：
$(selector).ajaxStart(function()) 和 $(selector).ajaxStop(function())
其中泵额，兩個(gè)方法中括號(hào)都是綁定的函數(shù)配深，當(dāng)發(fā)送 Ajax 請(qǐng)求前執(zhí)行ajaxStart()方法綁定的函數(shù)，請(qǐng)求成功后嫁盲，執(zhí)行ajaxStop ()方法綁定的函數(shù)篓叶。
例如，在調(diào)用ajax()方法請(qǐng)求服務(wù)器數(shù)據(jù)前羞秤，使用動(dòng)畫顯示正在加載中缸托，當(dāng)請(qǐng)求成功后，該動(dòng)畫自動(dòng)隱藏瘾蛋，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出嗦董，由于使用ajaxStart()和ajaxStop()方法綁定了動(dòng)畫元素，因此瘦黑，在開始發(fā)送 Ajax 請(qǐng)求時(shí)京革，元素顯示，請(qǐng)求完成時(shí)幸斥，動(dòng)畫元素自動(dòng)隱藏匹摇。
注意：該方法在 1.8.2 下使用是正常的
<body>
<div id="divtest">
<div class="title">
<span class="fl">加載一段文字</span>
<span class="fr">
<input id="btnShow" type="button" value="加載" />
</span>
</div>
<ul>
<li id="divload"></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divload").ajaxStart(function(){
$(this).html("正在請(qǐng)求數(shù)據(jù)...");
});
$("#divload").ajaxStop(function(){
$(this).html("數(shù)據(jù)請(qǐng)求完成！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友對(duì)我說：" + data.say + "</li>");
}
});
})
});
</script>
</body>
編程練習(xí)
定義一個(gè) json 對(duì)象甲葬，用于保存學(xué)生的相關(guān)資料
任務(wù)
通過$.each()工具函數(shù)廊勃，獲取數(shù)組中各元素的名稱與內(nèi)容，顯示在頁(yè)面中经窖。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑戰(zhàn)題</title>
<style>
.ui-table {margin: 20px auto; border-collapse: collapse; font-size: 12px; text-align: center; color: #666;}
.ui-table th, .ui-table td {padding: 4px 8px; border: 1px solid #ccc;}
.ui-table th {background-color: #f0f0f0;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<table class="ui-table" width="800" id="studentInfo">
<caption><h2>XX中學(xué)學(xué)生資料</h2></caption>
<thead>
<tr>
<th style="width:45px">序號(hào)</th>
<th>姓名</th>
<th>學(xué)號(hào)</th>
<th>性別</th>
<th>年齡</th>
<th>所在班級(jí)</th>
<th>富二代</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<input type="button" value="加載資料" onclick="DisplayInfo()">
</td>
</tr>
</tbody>
</table>
<script>
var students = [
{"name": "張三", "id": "00145", "sex": "男", "age": "15", "class": "初一(3)班", "vip": "否"},
{"name": "李四", "id": "00110", "sex": "女", "age": "15", "class": "初二(2)班", "vip": "否"},
{"name": "王五", "id": "00251", "sex": "男", "age": "17", "class": "初一(4)班", "vip": "是"},
{"name": "趙六", "id": "00031", "sex": "女", "age": "16", "class": "初二(3)班", "vip": "否"},
{"name": "吳七", "id": "00009", "sex": "女", "age": "19", "class": "初三(6)班", "vip": "否"},
{"name": "候八", "id": "00352", "sex": "男", "age": "14", "class": "初一(2)班", "vip": "是"},
];
function DisplayInfo() {
var tbody = $("#studentInfo").find("tbody");
tbody.empty();
$.each(students,function(index, student) {
tbody.append(
"<tr><td>" + parseInt(index+1) + "</td><td>" +
student.name + "</td><td>" +
student.id + "</td><td>" +
student.sex + "</td><td>" +
student.age + "</td><td>" +
student.class + "</td><td>" +
student.vip + "</td></tr>");
});
}
</script>
</body>
</html>
