jQuery load() 方法
原文連結:http://www.runoob.com/jquery/ajax-load.html
定義和用法
load() 方法從伺服器載入資料,並把返回的資料放置到指定的元素中。
注意:還存在一個名為 load 的 jQuery 事件方法。呼叫哪個,取決於引數。
語法
$(selector).load(url,data,function(response,status,xhr))
//頁面test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<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>
2、再建一個demo1.html,在上面新增兩個元素:用來觸發Ajax事件,id為”resText”的元素用來顯示追加的HTML內容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
</script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取" />
<div class="comment">
已有評論:
</div>
<div id="resText" ></div>
</body>
</html>
顯然,load()方法完成了原本很繁瑣的工作。開發人員只需要使用jQuery選擇器為HTML片段指定目標位置,然後將要載入的檔案的URL作為引數傳遞給load()方法即可。當單擊按鈕後,test.html頁面的HTML內ring就會被載入並插入主頁面<div id="resText"></div>
的元素中。
2、篩選載入的HTML文件
上面的例子是將test.html
頁面中的內容都載入到id
為"resText"
的元素裡。
如果只需要載入test.html
頁面內的某些元素,那麼可以使用load()方法的URL引數來達到目的。
通過為URL引數指定選擇符,就可以很方便地從載入過來的HTML文件裡篩選出所需要的內容。
load()方法的URL引數的語法結構為:
“url selector”。注意,URL和選擇器之間有一個空格。
例如:只需要載入test.html頁面中class為”para”的內容,可以將demo1.html中的
$("#resText").load("test.html");
改為:
$("#resText").load("test.html .para");
3、傳遞方法
load()方法的傳遞方式根據引數data來自動指定。如果沒有引數傳遞,則採用GET方式傳遞;反之,則會自動轉換為POST方法。
//無引數傳遞,則是GET方式
$('#resText').load('test.php',function(){
//...
});
//有引數傳遞,則是POST方式
$('#resText').load('test.php',{name:'rain',age:'22'},function(){
//...
});
4.回撥函式
對於必須在載入完成後才能繼續的操作,load()方法提供了回撥函式(callback),該函式有3個引數,分別代表請求返回的內容、請求狀態和XMLHttpRequest物件,jQuery程式碼如下:
$("#resText").load("test.html",function (responseText, textStatus, XMLHttpRequest){
alert(responseText); //請求返回的內容
alert(textStatus); //請求狀態:success,error
alert(XMLHttpRequest); //XMLHttpRequest物件
});
在load()方法中,無論Ajax請求是否成功,只要當請求完成(complete)後,回撥函式(callback)就被觸發。
load()方法通常用來從Web伺服器上獲取靜態的資料檔案,然後這並不能體現Ajax的全部價值。在專案中,如果需要傳遞一些引數給伺服器中的頁面,那麼可以使用