jQuery Ajax 加载

在本教程中,你将学习如何使用 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" ,参考第一个例子。