JQuery实现定时刷新功能代码
在网页开发中,经常会需要不断的刷新某个页面或某个局部数据。这时候就需要用到定时刷新来实现了。实现方式就是使用JS setInterval函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新。
成都创新互联是专业的印江网站建设公司,印江接单;提供成都网站建设、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行印江网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
实现代码如下:
代码解释:
1. 导入jquery
使用上面的语句导入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实现定时刷新功能代码
转载注明:http://pwwzsj.com/article/gghihg.html