jQuery Load 方法

jQuery AJAX：load() 方法

jQuery .load() 方法提供了一种简单的方式，可以从服务器获取 HTML 并将其注入到所选元素中。

理解 .load()

它从指定的 URL 获取数据（通常是 HTML），并将返回的内容直接放入匹配元素(们)的 HTML 中，替换任何现有内容。

基本语法：

$(selector).load(URL, [data], [callback]);

• URL (必需): 一个包含请求 URL 的字符串。
• data (可选): 一个随请求发送到服务器的纯对象或字符串。如果提供的是对象，请求方法会变为 POST；否则为 GET。
• callback (可选): 请求完成后执行的函数。它接收三个参数：responseTxt、statusTxt 和 xhr。

示例：从文件加载内容

假设你有一个名为 content/partial.html 的文件，其内容如下：

Latest News

This is the first news item.

This is the second news item.

要将 content/partial.html 的全部内容加载到 id="target-div" 的 <div> 中：

$(function() {
  $("#load-button").on('click', function() {
    $("#target-div").load("content/partial.html");
  });
});

示例：加载特定片段

你可以通过在 URL 后附加一个 jQuery 选择器（用空格分隔）来仅加载 HTML 文档的一部分。这会在页面完全加载后选择该片段。

要仅从 content/partial.html 加载 id="news-item-1" 的段落：

$(function() {
  $("#load-fragment-button").on('click', function() {
    // 注意 URL 和选择器之间的空格
    $("#target-div").load("content/partial.html #news-item-1");
  });
});

示例：使用回调函数

回调函数对于处理完成状态非常有用，特别是用于检查成功或失败。

回调函数参数：

• responseTxt: 返回的数据（字符串）。
• statusTxt: 描述状态的字符串（例如，“success”、“error”、“notmodified”、“timeout”）。
• xhr: jqXHR 对象（原生 XMLHttpRequest 对象的超集）。

在回调函数中检查状态的示例：

$(function() {
  $("#load-with-callback-button").on('click', function() {
    $("#target-div").load("content/partial.html", function(responseTxt, statusTxt, xhr) {
      if (statusTxt === "success") {
        alert("External content loaded successfully!");
      } else if (statusTxt === "error") {
        alert("Error: " + xhr.status + " " + xhr.statusText);
      }
    });
  });
});

现代替代方法：$.get、$.post、$.ajax 和 fetch

尽管 .load() 对于直接注入 HTML 很方便，但它不如其他 AJAX 方法灵活。

• $.get() 和 $.post(): 更适用于需要处理数据（JSON、XML、文本）后再显示，或使用 Promises（.done()、.fail()）更稳健地处理错误的请求。
• $.ajax(): 最具配置性的 jQuery AJAX 方法，对请求提供了细粒度控制。
• fetch API: 现代原生的 JavaScript 标准，用于发起网络请求。它使用 Promises，并且通常在非 jQuery 或现代 JS 项目中更受欢迎。

当你需要比 .load() 提供更多控制时，考虑使用这些替代方法，特别是处理非 HTML 数据格式或需要复杂错误处理时。

jQuery AJAX 参考

要全面了解所有 jQuery AJAX 方法和选项，请参考官方 jQuery AJAX 文档。