发布时间：2026-09-28 18:52:01 浏览次数：1
jQuery 定时局部刷新是指在网页中某个元素内部的内容需要定时进行更新，并且使用 jQuery 库来实现。一般地，实现这一操作的方法是使用 setInterval 函数周期性地发送 AJAX 请求，然后将其结果更新到指定元素中。
具体实现步骤如下：
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>编写用于定时刷新的函数，主要由以下几个步骤组成：
使用 jQuery 中的 $.ajax 函数向后端发送 AJAX 请求，并在成功的回调函数中完成对页面元素的更新。
function refresh() { $.ajax({ url: "/get_new_content", success: function(data) { // 操作 HTML 元素，例如 $("#content").html(data); } });}setInterval(refresh, 3000);<p id="content"> <!-- 这里会动态刷新 --></p>下面给出一个例子：实现每隔 2 秒钟刷新页面上的时间显示。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>定时刷新页面</title> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script></head><body> <h2 id="time"></h2> <script> function refresh() { var current_time = new Date().toLocaleString(); $("#time").html(current_time); } setInterval(refresh, 2000); </script></body></html>该例子中，定时刷新的目标是 id 为 time 的元素，使用了获得当前时间的 JavaScript 内置对象 Date 和 jQuery 库中的 html 函数。
另一个例子是实现每隔 1 秒钟刷新页面上的列表内容。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>定时刷新列表</title> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script></head><body> <ul id="list"> <li>原列表项 1</li> <li>原列表项 2</li> </ul> <script> function refresh() { $.ajax({ url: "/get_new_content", success: function(data) { // 将后端传来的数据更新到列表中 var new_list = ""; for (var i = 0; i < data.length; i++) { new_list += "<li>" + data[i] + "</li>"; } $("#list").html(new_list); } }); } setInterval(refresh, 1000); </script></body></html>在该例子中，定时刷新的目标是 id 为 list 的列表元素。每隔 1 秒钟向后端发送一次 AJAX 请求，后端返回的数据是一个字符串数组 data，然后将其用 for 循环遍历出整个列表，最后重新将列表更新到 id 为 list 的元素中。
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流