JQuery实现定时刷新

在网页开发中,经常会需要不断的刷新某个页面或某个局部数据。这时候就需要用到定时刷新来实现了。实现方式就是使用JS setInterval函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新。

实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
getData();
setInterval(function () {
getData();
}, 3000);
});

function getData() {
$.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

1
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

使用上面的语句导入JQuery库,下面的代码需要JQuery库的支持。

2. 页面加载完启动程序

1
2
3
4
5
6
7
$(function () {
getData(); // 第一次加载数据
// 开启定时任务,时间间隔为3000 ms。
setInterval(function () {
getData();
}, 3000);
});

一般定时任务需要在页面加载完成之后就启动。页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成(可以说:ready 在onload 前触发)。

建议在ready时就执行定时任务,使用下面的代码实现:

1
2
3
$(function () {
// do sometion
});

上面的代码等价于:

1
2
3
$(document).ready(function(){  
//do something
})

3. 获取数据并刷新页面

使用下面的代码获取数据并设置页面相应的值。从而刷新页面数据。这个步骤根据自己的需求写相应的代码。

1
2
3
4
5
6
7
8
9
function getData() {
$.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);
}
});
};
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!