DDR爱好者之家

JQuery实现定时刷新功能代码
站长资源 2024/11/27 佚名
54 1538
DDR爱好者之家 Design By 杰米

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

实现代码如下：

<script src="/UploadFiles/2021-04-02/jquery.min.js">


代码解释：


1. 导入jquery





<script src="/UploadFiles/2021-04-02/jquery.min.js">


使用上面的语句导入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);
  }
 });
};
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米