jQuery load()

admin發表於2017-02-25
jQuery
它可以從伺服器載入內容，然後寫入匹配元素。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
$(selector).load(URL,data,callback);

引數解析:

（1）.URL:包含傳送請求的URL字串。

（2）.data:與請求一同傳送的查詢字串鍵/值對集合。

（3）.callback:load()執行完畢後要執行的回撥函式。

jQuery1.0版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    $("#ant").load("mytest/demo/antzone.txt");
  })
})
</script>
</head>
<body>
<div id="ant"></div>
<input type="button" value="檢視效果" id="bt"/>
</body>
</html>

可以將文字檔案中的內容寫入div元素中。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    $("#ant").load("antzone.txt", function (responseTxt, statusTxt, xhr) {
      if(statusTxt=="success"){
        alert("內容載入成功！");
      }  
      if(statusTxt=="error"){
        alert("錯誤:"+xhr.status+":"+xhr.statusText);
      }  
    });
  });
})
</script>
</head>
<body>
<div id="ant"></div>
<input type="button" value="檢視效果" id="bt"/>
</body>
</html>

以上程式碼實現可以彈出錯誤提示，因為路徑不正確，找不到檔案。

回撥函式可以具有三個引數:

（1）.responseTxt:包含呼叫成功時的結果內容。

（2）.statusTXT:包含呼叫的狀態。

（3）.xhr:XMLHttpRequest物件。

相關文章