.load()

分類： Ajax > 簡寫方法

.load( url [, data ] [, complete ] )傳回： jQuery

說明： 從伺服器載入資料，並將傳回的 HTML 放入相符的元素中。

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

這個方法是最簡單的從伺服器擷取資料的方法。它大致等同於 $.get(url, data, success)，只不過它是一個方法而不是全域函式，而且它有一個隱含的回呼函式。偵測到成功的回應時（也就是當 textStatus 為「success」或「notmodified」時），.load() 會將符合的元素的 HTML 內容設定為傳回的資料。這表示大多數使用這個方法的情況都可以非常簡單

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

如果沒有元素符合選擇器（在本例中，如果文件不包含 id="result" 的元素），則不會傳送 Ajax 請求。

回呼函式

如果提供了「complete」回呼，則會在後處理和 HTML 插入執行後執行。會針對 jQuery 集合中的每個元素觸發一次回呼，而 this 會依序設定為每個 DOM 元素。

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

在上面的兩個範例中，如果目前的文檔不包含 ID 為「result」的元素，則不會執行 .load() 方法。

請求方法

如果資料以物件提供，則使用 POST 方法；否則，假設為 GET。

載入頁面片段

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

我們可以修改上面的範例，只使用擷取的文件的一部分

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

此方法執行時，會擷取 ajax/test.html 的內容，但接著 jQuery 會剖析回傳的文件，以尋找 ID 為 container 的元素。此元素及其內容會插入 ID 為 result 的元素，而擷取的文件其餘部分會被捨棄。

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

指令碼執行

使用沒有加後綴選擇器表達式的 URL 呼叫 .load() 時，內容會傳遞給 .html()，然後才會移除指令碼。這會在指令碼區塊被捨棄之前執行它們。不過，如果使用附加到 URL 的選擇器表達式呼叫 .load()，指令碼會在 DOM 更新之前被移除，因此不會執行。以下可以看到兩個案例的範例

在此，任何載入到 #a 的 JavaScript 作為文件的一部分，都會成功執行。

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

不過，在以下案例中，載入到 #b 的文件中的指令碼區塊會被移除，且不會執行

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

其他注意事項

  • 由於瀏覽器安全限制，大多數「Ajax」要求都受 同源政策 約束；要求無法成功從不同的網域、次網域、埠或通訊協定擷取資料。

範例

將其他頁面的清單項目載入有序清單。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!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.7.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 要求遇到錯誤，顯示通知。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!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.7.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 為 feeds 的 div 中。

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

結果

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

將資料陣列傳遞至伺服器。

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

與上述相同，但會將額外參數 POST 至伺服器，並在伺服器完成回應時執行回呼。

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