jQuery 的 load() 方法是一种便捷的 AJAX 方法，用于从服务器加载数据，并将返回的内容插入到选定的元素中。它使得无需编写复杂的 AJAX 代码就能实现页面部分内容的异步加载。

1. 基本语法

$(selector).load(url [, data ] [, complete(responseText, textStatus, XMLHttpRequest)]);
  • selector：目标 DOM 元素，用于插入加载的内容。
  • url：请求的 URL，可以包含一个空格和一个选择器，用来指定返回数据中需要提取的部分（例如 "page.html #content"）。
  • data（可选）：发送到服务器的查询参数，可以是对象或查询字符串。
  • complete（可选）：请求完成后执行的回调函数，参数包括返回的内容、状态以及 XMLHttpRequest 对象。

2. 使用示例

2.1 加载整个页面内容

// 将 "ajax/test.html" 文件的内容加载到 id 为 "result" 的元素中
$("#result").load("ajax/test.html");

2.2 加载页面中的特定部分

// 只加载 "ajax/test.html" 中 id 为 "container" 的部分内容
$("#result").load("ajax/test.html #container");

2.3 传递参数并执行回调

// 向服务器发送数据，并在加载完成后执行回调函数
$("#result").load("ajax/test.php", { id: 123 }, function(response, status, xhr) {
    if (status == "success") {
        console.log("加载成功！");
    } else {
        console.error("加载失败：", xhr.statusText);
    }
});

3. 特点与注意事项

  • 默认 GET 请求：load() 方法默认使用 GET 方式向服务器请求数据。
  • 自动插入返回内容：返回的 HTML 内容会自动插入到选定的元素中。
  • 部分加载：通过在 URL 中添加选择器（例如 "page.html #content"），你可以只加载返回数据中的指定部分。
  • 简化 AJAX 编程：load() 方法大大简化了 AJAX 调用的写法，适用于简单的内容加载场景。

通过使用 jQuery 的 load() 方法，你可以快速实现局部页面刷新、动态内容更新等功能，而无需手动处理 XMLHttpRequest 对象，从而提升开发效率。