jQuery Ajax之load()方法

更新時間：2009年10月12日 15:50:48 作者：

jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是laod()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。

load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠程HTML代碼并插入到DOM中。它的語法結(jié)構(gòu)為：

　　load( url [, data][, callback] )

　　load()方法參數(shù)解釋見下表：

參數(shù)名稱	類　型	說　　明
url	String	請求HTML頁面的URL地址
data（可選）	Object	發(fā)送至服務(wù)器的key/value數(shù)據(jù)
callback（可選）	Function	請求完成時的回調(diào)函數(shù)，無論請求成功或失敗

1、載入HTML文檔
首先創(chuàng)建一個名為test.html的HTML文件，為后臺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"> 
    已有評論： 
</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>

然后新建一個空白頁面，在上面添加兩個元素：<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文檔
　　上個例子是將test.html頁面的內(nèi)容都加載到id為“resText”的元素里。如果只需要加載test.html頁面內(nèi)的某些元素，那么可以使用load()方法的URL參數(shù)來達到目的。通過為URL參數(shù)指定選擇符，可以很方便地從加載過來的HTML文檔里篩選出所需要的內(nèi)容。
　　load()方法的URL參數(shù)的語法結(jié)構(gòu)為：“url selector”。注意，URL和選擇器之間有一個空格。
　　例如只需要加載test.html頁面中class為“para”的內(nèi)容，可以使用以下代碼來完成：
　　$("#resText").load("test.html .para");
　　運行效果則如下圖：

3、傳遞方式
　　load()方法的傳遞方式根據(jù)參數(shù)data來自動指定。如果沒有參數(shù)傳遞，則采用GET方式傳遞；反之，則自動轉(zhuǎn)換為POST方式。

復(fù)制代碼代碼如下:

 
//無參數(shù)傳遞，則是GET方式 
$("#resText").load("test.php",function(){ 
//...... 
}); 
//有參數(shù)傳遞，則是POST方式 
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){ 
//...... 
}); 

4、回調(diào)參數(shù)
　　對于必須在加載完成后才能繼續(xù)的操作，load()方法提供了回調(diào)函數(shù)（callback），該函數(shù)有三個參數(shù)，分別代表請求返回的內(nèi)容、請求狀態(tài)和XMLHttpRequest對象，jQuery代碼如下：

復(fù)制代碼代碼如下:

 
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){ 
//responseText:請求返回的內(nèi)容 
//textStatus:請求狀態(tài)：success、error、notmodified、timeout這4種 
//XMLHttpRequest:XMLHttpRequest對象 
}); 

　　注意：在load()方法中，無論Ajax請求是否成功，只要當(dāng)請求完成（complete）后，回調(diào)函數(shù)（callback）就被觸發(fā)。

您可能感興趣的文章: