jQuery Ajax 加载
在本教程中，您将学习如何使用 jQuery 从服务器加载数据。
jQuery load() 方法
jQuery load() 方法从服务器加载数据并将返回的 HTML 放入选定的元素中。 此方法提供了一种从 Web 服务器异步加载数据的简单方法。 此方法的基本语法可以通过以下方式给出：
load() 方法的参数含义如下：
- 必需的 URL 参数指定要加载的文件的 URL。
- 可选的 data 参数指定一组与请求一起发送到 Web 服务器的查询字符串（即键/值对）。
- 可选的 complete 参数基本上是一个在请求完成时执行的回调函数。 每个选定元素都会触发一次回调。
让我们将这种方法投入实际使用。 创建一个空白 HTML 文件"test-content.html"并将其保存在 网络服务器中的某个位置。 现在将以下 HTML 代码放入此文件中：
<h1>简单的 Ajax 演示</h1>
<p id="hint">这是一个简单的 Ajax 加载示例。</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-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").load("test-content.html");
});
});
</script>
</head>
<body>
<div id="box">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">加载内容</button>
</body>
</html>最后，在浏览器中打开此页面并单击"加载内容"按钮。 您会看到 DIV 框的内容被"test-content.html"文件的 HTML 内容替换。
提示：要测试这个 Ajax 示例，您需要将 HTML 文件放在 Web 服务器上。 您可以通过安装 WampServer 或 XAMPP 在您的 PC 上设置本地 Web 服务器。 由于 Ajax 发出 HTTP 请求，因此您必须使用"http://"打开演示文件。
注意： Ajax 请求只能针对存在于为发送 Ajax 请求的页面提供服务的同一 Web 服务器上存在的文件，出于安全原因，不能针对外部或远程服务器。 这称为同源策略。
此外，回调函数可以有三个不同的参数：responseTxt 包含调用成功时的结果内容，statusTxt 包含调用的状态， jqXHR 其中包含 XMLHttpRequest 对象。
此外，回调函数可以有三个不同的参数：
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-3.5.1.min.js"></script>
<script>
$(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-3.5.1.min.js"></script>
<script>
$(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>jQuery 选择器 #hint 在 url 参数 (line no-10) 中，指定要插入到 DIV 框内的"test-content.html"文件部分，这是一个具有 ID 属性的元素 值为 hint 即 id="hint"，请参见第一个示例。