当前位置: 首页 > 编程笔记 >

JQuery实现定时刷新功能代码

洪飞鸿
2023-03-14
本文向大家介绍JQuery实现定时刷新功能代码,包括了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);
  }
 });
};
 类似资料:
  • 本文向大家介绍jQuery实现的上拉刷新功能组件示例,包括了jQuery实现的上拉刷新功能组件示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的上拉刷新功能组件。分享给大家供大家参考,具体如下: 技术要点: 1、jQuery的插件写法 2、上拉刷新步骤分解 3、css样式 jQuery的插件写法: 上拉刷新步骤分解: 上拉刷新可以分解成三个部分:一是开始(start),

  • 本文向大家介绍vbs 定时删除功能实现代码,包括了vbs 定时删除功能实现代码的使用技巧和注意事项,需要的朋友参考一下 参考代码一: 参考代码二:

  • 本文向大家介绍jQuery实现AJAX定时刷新局部页面实例,包括了jQuery实现AJAX定时刷新局部页面实例的使用技巧和注意事项,需要的朋友参考一下 方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。 例子,定时局部刷新 定时局部刷新用到jQuery里面的set

  • 本文向大家介绍jQuery实现的仿select功能代码,包括了jQuery实现的仿select功能代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的仿select功能。分享给大家供大家参考。具体如下: 这里重新再次与大家分享jQuery仿select功能,这个实现起来倒不复杂,就当研究一下jQuey插件的用法啦,还望大家喜欢。 运行效果截图如下: 在线演示地址如下: h

  • 本文向大家介绍纯JS实现AJAX局部刷新功能,包括了纯JS实现AJAX局部刷新功能的使用技巧和注意事项,需要的朋友参考一下 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技

  • 本文向大家介绍jQuery实现倒计时按钮功能代码分享,包括了jQuery实现倒计时按钮功能代码分享的使用技巧和注意事项,需要的朋友参考一下 代码一: 代码二: 代码三: 代码四: 代码五: