登录  /  注册
首页 > web前端 > js教程 > 正文

JQuery实现定时刷新实例讲解

小云云
发布: 2018-01-12 10:05:42
原创
2496人浏览过

本文主要和大家分享jquery实现定时刷新实例讲解,在网页开发中,经常会需要不断的刷新某个页面或某个局部数据。这时候就需要用到定时刷新来实现了。实现方式就是使用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);
  }
 });
};
登录后复制

相关推荐:

Ajax实现无闪烁定时刷新页面实例代码

如何在jquery中设置定时刷新

Html之网页的定时跳转和定时刷新_html/css_WEB-ITnose

以上就是JQuery实现定时刷新实例讲解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号