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 DOM节点的遍历方法小结
Aug 15 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jquery 验证用户名是否重复代码实例
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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
详解Python的单元测试
2015/04/28 Python
jupyter安装小结
2016/03/13 Python
python rsa 加密解密
2017/03/20 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
python实现图像拼接功能
2020/03/23 Python
Python类super()及私有属性原理解析
2020/06/15 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
美国Max仓库:Max Warehouse
2020/05/31 全球购物
几个常见的软件测试问题
2016/09/07 面试题
门卫工作岗位职责
2013/12/17 职场文书
监理资料员岗位职责
2014/01/03 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
服务承诺书范文
2014/05/19 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript