jQuery load()：获取异步数据（附带实例）

在传统的 JavaScript 中，使用 XMLHttpRequest 对象异步加载数据，而在 jQuery 中，使用 load() 方法可以方便、快捷地实现获取异步数据的功能。

load() 方法的语法格式为：

load(url[,data][,callback])

参数说明如下：

• url：请求 HTML 页面的 URL；
• data：可选参数，指定发送至服务器的 key-value 数据；
• callback：可选参数，指定请求完成时调用的回调函数，无论请求是否成功。

load()载入HTML页面

【实例 1】使用 load() 方法载入页面。
1) 创建要载入的页面 test.html，代码如下：

<div>
    <p>C语言中文网</p>
    <p>C语言入门教程</p>
    <p>jQuery 开发基础教程</p>
</div>

2) 创建 index.html 页面，在页面中添加按钮以及 id 属性值为 loadhtml 的 <div> 元素，代码如下：

<input type="button" id="btn" value="载入页面"/>
<div id="loadhtml"></div>

3) 引入 jQuery 库并且在其下方编写 jQuery 代码，使用 load() 方法载入之前创建的 mr.html 页面，代码如下：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#btn").on("click", function () {
        $("#loadhtml").load("test.html");
    });
</script>

单击“载入页面”按钮，运行效果如下图所示：


从图 1 可以看到，test.html 页面被成功载入 index.html 页面中。load() 方法完成了本来很烦琐的工作，开发人员只要使用 jQuery 选择器指定载入页面的目标位置，之后将要载入页面的 URL 传递给 load() 方法即可。

load()载入HTML页面中的指定元素

例 1 载入的是整个 HTML 页面，如果只想载入某个页面中的部分元素，可以使用 load() 方法的 URL 参数。load() 方法的 URL 参数的语法结构为 url selector。

【实例 2】载入页面中 class 属性值为 mytest 的元素。
1) 创建要载入的页面 test.html，代码如下：

<div>
    <p class="mytest">C语言中文网</p>
    <p class="mytest">C语言入门教程</p>
    <p class="test">jQuery 开发基础教程</p>
</div>

2) 同实例 1 的第 2 步。

3) 在引入 jQuery 库的下方编写 jQuery 代码，使用 load() 方法载入 test.html 页面中 class 属性值为 mytest 的元素，代码如下：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#btn").on("click", function () {
        $("#loadhtml").load("test.html .mytest");
    });
</script>

单击“载入页面”按钮，运行效果如下图所示。

load()传递方式和传递参数

load() 方法的传递方式是根据传递参数 data 来指定的。如果没有传递参数 data，默认采用 get 方式传递，否则将自动转换为 post 方式。

例如下面的代码，无传递参数 data，因此传递方式是 get 方式：

$("#loadhtml1").load("test.php", function(responseText,status,XMLHttpRequest) {
    // 省略部分代码
});

而下面的代码有传递参数 data，因此传递方式是 post 方式：

$("#loadhtml1").load("test.php", {name: "xiaogang", age: "30"}, function(responseText,status,XMLHttpRequest) {
    // 省略部分代码
});