JQuery实现定时刷新功能代码
时间:2019-03-30
本文章向大家介绍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); } }); };
- 开发自己的Data Access Application Block[上篇]
- 18.9/18.10 LVS NAT模式搭建
- 谈谈WCF中的Data Contract (1):Data Contract Overview
- Linux基础(day66)
- 字符串的驻留(String Interning)
- 19.5 忘记Admin密码如何做
- 19.3/19.4/19.6 安装zabbix
- 欲火焚身,心静则凉--只靠冲动是不能长久地
- 深入理解C#3.x的新特性(4):Automatically Implemented Property
- 增加网卡注意点
- 深入理解C# 3.x的新特性(1): Anonymous Type
- Linux基础(day65)
- 18.12 keepalived + LVS
- 学会JS只是知道了“是什么”,并不意味着你会用JS做什么
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python自学成才之路 miniconda创建虚拟环境
- 逐行阅读Spring5.X源码(一) BeanDefinition,起点
- linux 磁盘占满 查看占用
- 逐行阅读Spring5.X源码(二) BeanDefinition的父接口-AttributeAccessor 、BeanMetadataElement ,进阶
- 64. Vue中的插槽slot
- 65. Vue中的作用域插槽
- SpringBoot : 全局异常配置
- springboot事务管理
- Java : 分享一个通用的获取请求客户端IP的方法
- 一套常用的css初始化样式
- Octave 笔记
- VSCode如何设置Vue前端的debug调试
- Istio安全-授权(实操三)
- SpringBoot入门建站全系列(三十六)AspectJ做AOP日志管理
- 图像处理笔记(1)----OpenCV 图像BGR转RGB