jQuery中ajax的load()方法用法實例

2019-11-20 13:35:55

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery中ajax的load()方法用法。分享給大家供大家參考。具體分析如下：

此函數jQuery中簡單而功能強大的ajax方法。
它可以從服務器加載內容，然后寫入匹配元素。
語法結構:

復制代碼代碼如下:

$(selector).load(URL,data,callback);

參數解析:

1.selector:一個選擇器，可以將內容加載到此選擇器匹配的元素中。
2.URL:必須，需要加載的一個url地址。
3.data:可選，與請求一同發送的查詢字符串鍵/值對集合。
4.callback:可選，load()函數執行完畢后要執行的函數，也即是一個回調函數。

代碼實例:

復制代碼代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://m.survivalescaperooms.com/" />
<title>武林網</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    $("#thediv").load("mytest/demo/antzone.txt");
  })
})
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" value="查看效果" id="bt"/>
</body>
</html>

以上代碼實現了我們的要求，可以將文本文件中的內容寫入div元素中。

callback回調函數:

回調函數可以具有三個參數，下面介紹一下三個參數的作用:

1.responseTxt:包含調用成功時的結果內容。
2.statusTXT:包含調用的狀態。
3.xhr:XMLHttpRequest對象。

代碼實例:

復制代碼代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://m.survivalescaperooms.com/" />
<title>武林網</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    $("#thediv").load("antzone.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success"){
        alert("內容加載成功！");
      }  
      if(statusTxt=="error"){
        alert("錯誤:"+xhr.status+":"+xhr.statusText);
      }  
    });
  });
})
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" value="查看效果" id="bt"/>
</body>
</html>