好资源导航 » 文章资讯 » JQuery实现定时刷新功能代码

JQuery实现定时刷新功能代码

2024-02-24 02:41:05 43

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

实现代码如下：

代码解释：

1.导入jquery

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

2.页面加载完启动程序

$(function(){
getData();//第一次加载数据
//开启定时任务，时间间隔为3000ms。
setInterval(function(){
getData();
},3000);
});

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

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

$(function(){
//dosometion
});

上面的代码等价于：

$(document).ready(function(){
//dosomething
})

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);
}
});
};

返回顶部
514930285
czq8825@qq.com

JQuery实现定时刷新功能代码

热门推荐

随机推荐