jQuery 定时局部刷新(setInterval)

jQuery 定时局部刷新是指在网页中某个元素内部的内容需要定时进行更新，并且使用 jQuery 库来实现。一般地，实现这一操作的方法是使用 setInterval 函数周期性地发送 AJAX 请求，然后将其结果更新到指定元素中。

具体实现步骤如下：

在 head 标签中导入 jQuery 库：

<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 函数周期性地调用刷新函数。例如，下面的代码将每 3 秒钟向后端发送一次 AJAX 请求，刷新 id 为 content 的元素内的内容：

setInterval(refresh, 3000);

在需要定时刷新的页面元素中设置好容器元素和内容元素，例如：

<div id="content">
  <!-- 这里会动态刷新 -->
</div>

下面给出一个例子：实现每隔 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 的元素中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 定时局部刷新(setInterval) - Python技术站