|
|
load()方法是jQuery中最為簡(jiǎn)單和常用的Ajax方法，能載入遠(yuǎn)程HTML代碼并插入到DOM中。它的語(yǔ)法結(jié)構(gòu)為：
load( url [, data][, callback] )
load()方法參數(shù)解釋見下表：
| 參數(shù)名稱 | 類 型 | 說 明 |
| url | String | 請(qǐng)求HTML頁(yè)面的URL地址 |
| data（可選） | Object | 發(fā)送至服務(wù)器的key/value數(shù)據(jù) |
| callback（可選） | Function | 請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無(wú)論請(qǐng)求成功或失敗 |
1、 載入HTML文檔
首先創(chuàng)建一個(gè)名為test.html的HTML文件，為后臺(tái)Ajax載入做準(zhǔn)備。代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="comment">
已有評(píng)論：
</div>
<div class="comment">
<h6>張三：</h6>
<p class="para">沙發(fā)。</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳。</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板。</p>
</div>
</body>
</html>
然后新建一個(gè)空白頁(yè)面，在上面添加兩個(gè)元素：<button>按鈕用來觸發(fā)Ajax事件，id為“resText”的元素用來顯示追加的HTML內(nèi)容。接下來就是編寫jQuery代碼了。等DOM元素加載完畢，通過單擊id為“send”的按鈕來調(diào)用laod()方法，然后將test.html的內(nèi)容加載到id為“resText”的元素里。那么代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/Javascript" src="/jquery-1.3.2.js" ></script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />
<div id="resText"></div>
<script type="text/Javascript"><!--
$(document).ready(function(){
$("#send").click(function(){
$("#resText").load("test.html");
});
});
// --></script>
</body>
</html>
當(dāng)按鈕被單擊后，出現(xiàn)如下圖的界面：
顯然，load()方法完成了原本很繁瑣的工作。開發(fā)人員只需要使用jQuery選擇器為HTML片段指定目標(biāo)位置，然后將要加載的文件的URL作為參數(shù)傳遞給load()方法即可。
2、 篩選載入的HTML文檔
上個(gè)例子是將test.html頁(yè)面的內(nèi)容都加載到id為“resText”的元素里。如果只需要加載test.html頁(yè)面內(nèi)的某些元素，那么可以使用load()方法的URL參數(shù)來達(dá)到目的。通過為URL參數(shù)指定選擇符，可以很方便地從加載過來的HTML文檔里篩選出所需要的內(nèi)容。
load()方法的URL參數(shù)的語(yǔ)法結(jié)構(gòu)為：“url selector”。注意，URL和選擇器之間有一個(gè)空格。
例如只需要加載test.html頁(yè)面中class為“para”的內(nèi)容，可以使用以下代碼來完成：
$("#resText").load("test.html .para");
運(yùn)行效果則如下圖：
3、 傳遞方式
load()方法的傳遞方式根據(jù)參數(shù)data來自動(dòng)指定。如果沒有參數(shù)傳遞，則采用GET方式傳遞；反之，則自動(dòng)轉(zhuǎn)換為POST方式。
復(fù)制代碼 代碼如下:
//無(wú)參數(shù)傳遞，則是GET方式
$("#resText").load("test.php",function(){
//......
});
//有參數(shù)傳遞，則是POST方式
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){
//......
});
4、 回調(diào)參數(shù)
對(duì)于必須在加載完成后才能繼續(xù)的操作，load()方法提供了回調(diào)函數(shù)（callback），該函數(shù)有三個(gè)參數(shù)，分別代表請(qǐng)求返回的內(nèi)容、請(qǐng)求狀態(tài)和XMLHttpRequest對(duì)象，jQuery代碼如下：
復(fù)制代碼 代碼如下:
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//responseText:請(qǐng)求返回的內(nèi)容
//textStatus:請(qǐng)求狀態(tài)：success、error、notmodified、timeout這4種
//XMLHttpRequest:XMLHttpRequest對(duì)象
});
注意：在load()方法中，無(wú)論Ajax請(qǐng)求是否成功，只要當(dāng)請(qǐng)求完成（complete）后，回調(diào)函數(shù)（callback）就被觸發(fā)。
JavaScript技術(shù)：jQuery Ajax之load()方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
