JQuery实现定时刷新功能代码


Posted in jQuery onMay 09, 2017

在网页开发中,经常会需要不断的刷新某个页面或某个局部数据。这时候就需要用到定时刷新来实现了。实现方式就是使用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);
  }
 });
};
jQuery 相关文章推荐
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
JQuery实现图片轮播效果
May 08 #jQuery
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
php和html的区别点详细总结
2019/09/24 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
分析经典Python开发工程师面试题
2019/04/08 Python
python绘制地震散点图
2019/06/18 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python3 读取Word文件方式
2020/02/13 Python
Pytorch转tflite方式
2020/05/25 Python
python如何构建mock接口服务
2021/01/28 Python
利用python实现汉诺塔游戏
2021/03/01 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
同学会邀请书大全
2014/01/12 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年领班工作总结
2015/04/29 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
初中数学教学随笔
2015/08/15 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
mysql事务隔离级别详情
2021/10/24 MySQL
Golang map映射的用法
2022/04/22 Golang