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);
  }
 });
};
赞 (0)

相关推荐

  • Jquery、Ajax、Struts2完成定时刷新的方法

    步骤一:导入jquery插件 复制代码 代码如下: <script type="text/javascript" src="js/easyui/jquery-1.8.0.min.js"></script> 步骤二:在<body></body>中添加信息显示的地方 复制代码 代码如下: <label id="context"></label> 步骤三:在页面中添加JS代码 复制

  • jQuery实现AJAX定时刷新局部页面实例

    方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法. <script> $(function(){ setInterval(aa,10); func

  • JQuery实现定时刷新功能代码

    在网页开发中,经常会需要不断的刷新某个页面或某个局部数据.这时候就需要用到定时刷新来实现了.实现方式就是使用JS setInterval函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新. 实现代码如下: <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ getData(); setIn

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • Android基于广播事件机制实现简单定时提醒功能代码

    本文实例讲述了Android基于广播事件机制实现简单定时提醒功能代码.分享给大家供大家参考,具体如下: 1.Android广播事件机制 Android的广播事件处理类似于普通的事件处理.不同之处在于,后者是靠点击按钮这样的组件行为来触发,而前者是通过构建Intent对象,使用sentBroadcast()方法来发起一个系统级别的事件广播来传递信息.广播事件的接收是通过定义一个继承Broadcast Receiver的类实现的,继承该类后覆盖其onReceive()方法,在该方法中响应事件.And

  • Jquery：ajax实现翻页无刷新功能代码

    不多说,直接贴代码: 下面是js部分: 复制代码 代码如下: var pageSize = "10";//每页行数 var currentPage = "1";//当前页 var totalPage = "0";//总页数 var rowCount = "0";//总条数 var params="";//参数 var url="activity_list.action";//action

  • jQuery实现倒计时按钮功能代码分享

    代码一: { wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled").val('重发短信验证码'); this.wait = 90; } else { var _this = this; $(that).attr("disabled", true).val('在'+_this.wait+'秒后点此重发'); _this.wait--; setTi

  • jquery 弹出公告功能代码

    jquery 弹出公告 *{margin:0;padding:0;font-size:12px;} li{float:left;width:100px;border:1px solid #ccc;list-style:none;text-align:center;} h3{margin:20px auto;text-align:center;} input{width:120px;height:30px;cursor:pointer;} #notice{position:absolute;wid

  • jQuery+CSS3实现点赞功能

    jQuery+CSS3实现点赞功能

    效果图: 图(1) 初始图 图(2) 点击后 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m

  • jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

  • django ajax提交评论并自动刷新功能的实现代码

    在试了很多次了,终于搞定了,上代码吧.(我用的是jQuery的ajax,不是原生的) js代码: <script> $(document).ready(function () { getcomment(); $('.comment-box button').click(function () { var comment_text = $('.comment-box textarea').val(); $.ajax({ type: 'POST', url: '/bbs/article/{{ ar

随机推荐