在前端开发中，经常需要动态更新网页上的内容。其中，刷新或重新加载一个 div 中的内容是一种非常常见的操作，而使用 jQuery 可以使这个过程更加简单。本文将介绍如何使用 jQuery 来刷新或重新加载一个 div，包括详细的步骤和示例代码。
步骤
以下是使用 jQuery 刷新或重新加载一个 div 的步骤：
- 确定要刷新或重新加载的 div 元素，通常使用其 ID 或类名来获取该元素。
- 为该元素绑定一个事件处理程序，例如点击事件或定时器事件。
- 在事件处理程序中，使用 jQuery 的 AJAX 方法来从服务器获取新的数据。
- 将获取到的新数据插入到 div 元素中。
下面我们将逐一介绍这些步骤。
确定要刷新或重新加载的 div 元素
首先，我们需要确定要刷新或重新加载的 div 元素。通常情况下，我们会给这个元素设置一个唯一的 ID 或类名，以便在 jQuery 中进行选择。
<div id="my-div">原始内容</div>
绑定事件处理程序
接下来，我们需要为这个 div 元素绑定一个事件处理程序。可以使用 jQuery 的 on() 方法来为该元素绑定一个点击事件或定时器事件等。
$("#my-div").on("click", function() {
// 在这里写 AJAX 请求代码
});使用 AJAX 方法获取新数据
在事件处理程序中，我们需要使用 jQuery 的 AJAX 方法来从服务器获取新的数据。AJAX 是 Asynchronous JavaScript and XML 的缩写，是一种无需刷新整个页面的技术，可以向服务器异步发送请求并接收响应。
$("#my-div").on("click", function() {
$.ajax({
url: "http://example.com/new-data",
success: function(data) {
// 在这里将获取到的新数据插入到 div 元素中
}
});
});在上面的代码中，我们使用了 $.ajax() 方法来发送一个 GET 请求，并指定了服务器端的 URL。当成功接收到响应时，success 回调函数会被执行，并将获取到的新数据作为参数传递给它。
将获取到的新数据插入到 div 元素中
最后，我们需要将获取到的新数据插入到 div 元素中，以实现刷新或重新加载的效果。可以使用 jQuery 的 html() 或 text() 方法来设置元素的内容。
$("#my-div").on("click", function() {
$.ajax({
url: "http://example.com/new-data",
success: function(data) {
$("#my-div").html(data); // 将获取到的新数据插入到 div 元素中
}
});
});在上面的代码中，我们使用了 html() 方法将获取到的新数据插入到 div 元素中。如果要插入纯文本内容，可以使用 text() 方法。
示例代码
下面是一个完整的示例代码，演示如何使用 jQuery 刷新或重新加载一个 div 中的内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------ ------- --- ------------
------- -----------------------------------------------------------
-------
------
---- ----------------------
------- -------------------------------
--------
-------------------------------- ---------- -
--------
---- ------------------------------
-------- -------------- -
------------------------
-
---
---
---------
-------
-------在上面的代码中，我们创建了一个包含一个 div 元素和
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14555