如何在单击按钮时使用 jQuery 和 Ajax 重新加载 Div 的内容？

使用 jQuery 和 Ajax 重新加载 Div 内容

问题：

您需要重新加载单击按钮即可显示特定 div 的内容，而无需刷新整个页面。

代码示例：

<code class="html"><div role="button" class="marginTop50 marginBottom">
  <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
  <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" />
</div>

<div id="list">
  <!-- Content to be reloaded -->
</div></code>

错误方法：

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $("#step1Content").load();
});</code>

此代码不正确，因为 load() 方法需要一个 URL 来加载内容。

解决方案：

jQuery 的 load( ) 方法可以与 URL 一起使用来加载远程内容。但是，要从当前页面重新加载内容，我们可以使用以下方法：

1. 使用绝对 URL 和哈希：

<code class="javascript">$("#list").load(location.href + " #list");</code>

这会从当前 URL 加载 ID 为“list”的元素的内容。请注意第二个“#”号之前的空格。

2. 使用 Ajax：

另一种方法是使用 Ajax。通过这种方法，我们向服务器发出 Ajax 请求，检索内容并更新 div。

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $.ajax({
    url: "YOUR_ENDPOINT_URL",
    success: function (data) {
      $("#list").html(data);
    },
  });
});</code>

在本例中，“YOUR_ENDPOINT_URL”是返回要加载的内容的服务器端点

附加说明：

1. 确保在重新加载内容之前启用“再次捕获”按钮。
2. 如果您使用 Ajax 方法，请确保服务器端点以适当的格式（HTML 或 JSON）返回内容。

以上是如何在单击按钮时使用 jQuery 和 Ajax 重新加载 Div 的内容？的详细内容。更多信息请关注PHP中文网其他相关文章！