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()` 方法