JQuery实现定时刷新实例讲解-js教程-PHP中文网

JQuery实现定时刷新实例讲解

小云云

发布： 2018-01-12 10:05:42

原创

3020人浏览过

本文主要和大家分享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
});

登录后复制

上面的代码等价于：

Ex驾校预约小程序

传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自

查看详情

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

登录后复制