jQuery | load() 示例

jQuery 的 load() 方法是一种简便的方式来异步加载和插入外部内容到网页中。它能够从服务器加载一个 HTML 页面并将其插入到指定的元素中。本示例将演示如何使用 load() 方法加载外部内容。

语法

$(selector).load(url, data, callback);

参数

• selector: 要加载内容的元素选择器。
• url: 要加载内容的 URL 地址。
• data (可选): 要发送到服务器的附加参数。
• callback (可选): 加载完成后执行的回调函数。

示例

假设我们有一个 HTML 页面，其中有一个按钮元素：

<button id="loadButton">点击加载</button>
<div id="content">这里将会显示加载的内容</div>

现在，我们可以使用 load() 方法来加载一个外部 HTML 文件并将其插入到 #content 元素中。以下是一个例子：

$(document).ready(function() {
  $("#loadButton").click(function() {
    $("#content").load("external.html", function() {
      console.log("加载完成！");
    });
  });
});

在上面的示例中，当按钮被点击时，loadButton 的 click 事件处理函数会被触发。然后，通过 load() 方法来加载 external.html 文件的内容，并将其插入到 #content 元素中。加载完成后，回调函数会被执行，并在控制台输出一条消息。

请确保将以上代码放在 jQuery 库的引入语句之后，以保证 load() 方法正常工作。

注意事项

• 你可以根据需要修改 selector 来指定加载内容的具体元素。
• url 可以是一个相对路径或绝对路径，也可以是一个包含查询参数的 URL。
• 可以使用 data 参数来发送附加的数据到服务器。
• callback 函数在加载完成后被调用，可以执行需要的操作，比如更新其他元素或执行其他 JavaScript 代码。

以上是使用 jQuery 的 load() 方法加载外部内容的示例。通过 load() 方法，你可以轻松实现异步加载，并将外部内容插入到网页中的指定元素中。