當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .load()用法及代碼示例


用法 
.load( url [, data ] [, complete ] ) => jQuery

說明：從服務器加載數據並將返回的 HTML 放入匹配的元素中。

  • 添加的版本：1.0.load( url [, data ] [, complete ] )

    • url
      類型：String
      包含請求發送到的 URL 的字符串。
    • data
      類型：PlainObject 或 String
      與請求一起發送到服務器的普通對象或字符串。
    • complete
      類型：Function(String responseText，String textStatus，jqXHRjqXHR)
      請求完成時執行的回調函數。

注意：在 jQuery 3.0 之前，事件處理套件還有一個名為 .load() 的方法。舊版本的 jQuery 根據傳遞給它的參數集確定要觸發的方法。

此方法是從服務器獲取數據的最簡單方法。它大致相當於$.get(url, data, success)，隻是它是一個方法而不是全局函數，並且它有一個隱式回調函數。當檢測到成功響應時(即當textStatus 為"success" 或"notmodified" 時)，.load() 將匹配元素的 HTML 內容設置為返回的數據。這意味著該方法的大多數用途都非常簡單：

$( "#result" ).load( "ajax/test.html" );

如果選擇器沒有匹配任何元素——在這種情況下，如果文檔不包含 id="result" 的元素——將發送 Ajax 請求 not。

回調函數

如果提供了"complete" 回調，則會在post-processing 並執行 HTML 插入之後執行。回調為 jQuery 集合中的每個元素觸發一次，並且 this 依次設置為每個 DOM 元素。

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

在上麵的兩個示例中，如果當前文檔不包含 ID 為 "result," 的元素，則不會執行 .load() 方法。

請求方法

如果數據作為對象提供，則使用 POST 方法；否則，假定為 GET。

加載頁麵片段

.load() 方法與 $.get() 不同，它允許我們指定要插入的遠程文檔的一部分。這是通過url 參數的特殊語法實現的。如果字符串中包含一個或多個空格字符，則假定字符串中第一個空格之後的部分是確定要加載的內容的 jQuery 選擇器。

我們可以修改上麵的示例以僅使用獲取的文檔的一部分：

$( "#result" ).load( "ajax/test.html #container" );

當此方法執行時，它會檢索 ajax/test.html 的內容，但隨後 jQuery 會解析返回的文檔以找到 ID 為 container 的元素。該元素及其內容被插入到 ID 為 result 的元素中，其餘檢索到的文檔將被丟棄。

jQuery 使用瀏覽器的.innerHTML 屬性來解析檢索到的文檔並將其插入到當前文檔中。在此過程中，瀏覽器通常會從文檔中過濾元素，例如 <html> 、 <title> 或 <head> 元素。因此，.load() 檢索到的元素可能與瀏覽器直接檢索到的文檔不完全相同。

腳本執行

使用不帶後綴選擇器表達式的 URL 調用 .load() 時，內容會在刪除腳本之前傳遞給 .html()。這會在腳本塊被丟棄之前執行它們。但是，如果調用 .load() 時將選擇器表達式附加到 URL，則腳本會在 DOM 更新之前被剝離，因此會執行 not。兩種情況的示例如下所示：

在這裏，作為文檔的一部分加載到#a 中的任何 JavaScript 都將成功執行。

$( "#a" ).load( "article.html" );

但是，在以下情況下，正在加載到 #b 的文檔中的腳本塊將被剝離並且不被執行：

$( "#b" ).load( "article.html #target" );

其他注意事項：

  • 由於瀏覽器安全限製，大多數 "Ajax" 請求都受製於 same origin policy ；請求無法從不同的域、子域、端口或協議成功檢索數據。

例子：

將另一個頁麵的列表項加載到有序列表中。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Projects:</b>
<ol id="new-projects"></ol>
 
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
 
</body>
</html>

演示：

如果 Ajax 請求遇到錯誤，則顯示通知。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
 
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>
 
</body>
</html>

演示：

將 feeds.html 文件加載到帶有提要 ID 的 div 中。

$( "#feeds" ).load( "feeds.html" );

結果：

<div id="feeds"><b>45</b> feeds found.</div>

將數據數組傳遞給服務器。

$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

與上麵相同，但會將附加參數 POST 到服務器，並在服務器完成響應時執行回調。

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "The last 25 entries in the feed have been loaded" );
});

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .load()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。