load()方法是jQuery中最為簡單和常用的Ajax方法,能載入遠程HTML代碼並插入到DOM中。它的語法結構為:
load( url [, data][, callback] )
load()方法參數解釋見下表:
參數名稱 類 型 說 明 url String 請求HTML頁面的URL地址 data(可選) Object 發送至服務器的key/value數據 callback(可選) Function 請求完成時的回調函數,無論請求成功或失敗1、 載入HTML文檔
首先創建一個名為test.html的HTML文件,為後台Ajax載入做准備。代碼如下:
代碼如下:
<!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">沙發。</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>按鈕用來觸發Ajax事件,id為“resText”的元素用來顯示追加的HTML內容。接下來就是編寫jQuery代碼了。等DOM元素加載完畢,通過單擊id為“send”的按鈕來調用laod()方法,然後將test.html的內容加載到id為“resText”的元素裡。那麼代碼如下:
代碼如下:
<!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>
當按鈕被單擊後,出現如下圖的界面:
顯然,load()方法完成了原本很繁瑣的工作。開發人員只需要使用jQuery選擇器為HTML片段指定目標位置,然後將要加載的文件的URL作為參數傳遞給load()方法即可。
2、 篩選載入的HTML文檔
上個例子是將test.html頁面的內容都加載到id為“resText”的元素裡。如果只需要加載test.html頁面內的某些元素,那麼可以使用load()方法的URL參數來達到目的。通過為URL參數指定選擇符,可以很方便地從加載過來的HTML文檔裡篩選出所需要的內容。
load()方法的URL參數的語法結構為:“url selector”。注意,URL和選擇器之間有一個空格。
例如只需要加載test.html頁面中class為“para”的內容,可以使用以下代碼來完成:
$("#resText").load("test.html .para");
運行效果則如下圖:
3、 傳遞方式
load()方法的傳遞方式根據參數data來自動指定。如果沒有參數傳遞,則采用GET方式傳遞;反之,則自動轉換為POST方式。
代碼如下:
//無參數傳遞,則是GET方式
$("#resText").load("test.php",function(){
//......
});
//有參數傳遞,則是POST方式
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){
//......
});
4、 回調參數
對於必須在加載完成後才能繼續的操作,load()方法提供了回調函數(callback),該函數有三個參數,分別代表請求返回的內容、請求狀態和XMLHttpRequest對象,jQuery代碼如下:
代碼如下:
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//responseText:請求返回的內容
//textStatus:請求狀態:success、error、notmodified、timeout這4種
//XMLHttpRequest:XMLHttpRequest對象
});
注意:在load()方法中,無論Ajax請求是否成功,只要當請求完成(complete)後,回調函數(callback)就被觸發。