jQuery Ajax 載入

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 從伺服器載入資料。

jQuery `load()` 方法

jQuery load() 方法從伺服器載入資料並將返回的 HTML 放入選定的元素中。此方法提供了一種從 Web 伺服器非同步載入資料的簡單方法。該方法的基本語法如下：

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

load() 方法的引數具有以下含義：

必需的 URL 引數指定要載入的檔案的 URL。
可選的 data 引數指定一組查詢字串（即鍵/值對），它與請求一起傳送到 Web 伺服器。
可選的 complete 引數基本上是一個在請求完成時執行的回撥函式。對每個選定元素觸發一次回撥。

讓我們把這個方法實踐一下。建立一個空白的 HTML 檔案 test-content.html 並將其儲存在Web 伺服器的某個位置。現在將以下 HTML 程式碼放在此檔案中：

<h1>Simple Ajax Demo</h1>
<p id="hint">This is a simple example of Ajax loading.</p>
<p><img src="sky.jpg" alt="Cloudy Sky"></p>

現在，再建立一個 HTML 檔案，名為 load-demo.html，並將其儲存在你儲存上一個檔案的同一位置。現在將以下 HTML 程式碼放入其中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html");
    });
});
</script>
</head>
<body>
    
        <h2>Click button to load new content inside DIV box</h2>
    
    <button type="button">Load Content</button>
</body>
</html>

最後，在瀏覽器中開啟此頁面，然後單擊 Load Content 按鈕。你將看到 <div> 的內容被 test-content.html 檔案的 HTML 內容替換。

提示： 要測試此 Ajax 示例，你需要將 HTML 檔案放在 Web 伺服器上。你可以通過安裝 WampServer 或 XAMPP 在 PC 上設定本地 Web 伺服器。由於 Ajax 發出 HTTP 請求，因此必須使用 http:// 開啟演示檔案。

注意： Ajax 請求只能傳送到服務於傳送 Ajax 請求的頁面的同一 Web 伺服器上的檔案，而不是出於安全原因而不是外部或遠端伺服器。這稱為同源政策。

此外，回撥函式可以有三個不同的引數：

responseTxt - 如果請求成功，則包含結果內容。
statusTxt - 包含請求的狀態，例如成功或錯誤。
jqXHR - 包含 XMLHttpRequest 物件。

以下是上一個示例的修改版本，它將根據請求的狀態向使用者顯示成功或錯誤訊息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html", function(responseTxt, statusTxt, jqXHR){
            if(statusTxt == "success"){
                alert("New content loaded successfully!");
            }
            if(statusTxt == "error"){
                alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
            }
        });
    });
});
</script>
</head>
<body>
    <div id="box">    
        <h2>Click button to load new content inside DIV box</h2>
    </div>    
    <button type="button">Load Content</button>
</body>
</html>

載入頁面碎片

jQuery load() 還允許我們只獲取文件的一部分。這可以通過在 url 引數後附一個空格後跟 jQuery 選擇器來實現，讓我們看看下面的例子，來更清楚地理解。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("test-content.html #hint");
    });
});
</script>
</head>
<body>
    <div id="box">    
        <h2>Click button to load new content inside DIV box</h2>
    </div>    
    <button type="button">Load Content</button>
</body>
</html>

在 url 引數（第 10 行）中的 jQuery 選擇器 #hint，指定了 test-content.html 檔案的部分將被插入到 <div> 框內，它是具有 hint 值的 ID 屬性的元素，即 id="hint" ，參考第一個例子。

jQuery load() 方法

載入頁面碎片

jQuery `load()` 方法