如何使用 jQuery/AJAX 更新网页部分而不重新加载？

如何使用 jQuery/AJAX 更新页面的一部分而不重新加载

在单击按钮时重新加载特定 div，而不影响整个页面页面是Web开发中的常见需求。这可以使用 jQuery 的 AJAX 功能来实现。

示例

假设您有一个按钮，单击该按钮时，应更新名为 div1 的 div 的内容。具体操作方法如下：

HTML:

<code class="html"><input type="button" id="myButton" value="Update DIV">

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery:

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

说明：

• jQuery 单击事件处理程序附加到 id 为 myButton 的按钮。
• 单击按钮时，load() 函数在 id div1 的 div 上调用。
• load() 函数将指定 URL 的内容加载到div.
• 在本例中，URL 为 location.href " #div1"。这将检索当前页面的 URL 并附加 #div1 选择器。
• 第二个 # 符号之前的空格至关重要。如果没有它，上面的代码将重新加载 div 内的整个页面。
• 因此，当单击按钮时，div1 的内容将更新为相同内容

注意：请记住在使用上述代码之前包含 jQuery 库。

以上是如何使用 jQuery/AJAX 更新网页部分而不重新加载？的详细内容。更多信息请关注PHP中文网其他相关文章！