JQuery如何实现定时刷新？

最新推荐文章于 2021-10-21 11:34:43 发布

qq_38604641

最新推荐文章于 2021-10-21 11:34:43 发布

阅读量914

点赞数

在网页开发中，经常会需要不断的刷新某个页面或某个局部数据。这时候就需要用到定时刷新来实现了。实现方式就是使用JS setInterval函数每隔一段时间请求一次数据，然后将请求结果返回给前端HTML实现刷新。
　　实现代码如下：
　　<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
      getData();
      setInterval(function(){
         getData();
      }, 3000);
});

functiongetData(){
      $.getJSON("/blood/pressure/1", function(data){
         if (200 == data.code) {
            $("#systolic").text(data.data.systolic);
            $("#diastolic").text(data.data.diastolic);
            $("#pulse").text(data.data.pulse);
         }
      });
};
</script>
　　代码解释：
　　1. 导入jquery
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
　　使用上面的语句导入JQuery库，下面的代码需要JQuery库的支持。
　　2. 页面加载完启动程序
　　$(function(){
　　getData(); // 第一次加载数据
　　// 开启定时任务，时间间隔为3000 ms。
　　setInterval(function(){
　　getData();
　　}, 3000);
　　});
　　一般定时任务需要在页面加载完成之后就启动。页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成(可以说：ready 在onload 前触发)。
　　建议在ready时就执行定时任务，使用下面的代码实现：
　　$(function(){
　　// do sometion
　　});
　　上面的代码等价于：
　　$(document).ready(function(){
　　//do something
　　})
　　3. 获取数据并刷新页面
　　使用下面的代码获取数据并设置页面相应的值。从而刷新页面数据。这个步骤根据自己的需求写相应的代码。
　　functiongetData(){
　　$.getJSON("/blood/pressure/1", function(data){
　　if (200 == data.code) {
　　$("#systolic").text(data.data.systolic);
　　$("#diastolic").text(data.data.diastolic);
　　$("#pulse").text(data.data.pulse);
　　}
　　});
　　};

来源：Kylin's Blog