html 页面刷新

JS 脚本

方法1 setInterval 函数

定时局部刷新用到jQuery里面的setInterval方法, 该函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新。

setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间。

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
  getData();
  setInterval(function(){
   getData();
  }, 3000);
 });

 function getData(){
  $.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);
   }
  });

  //$("#date").text((new Date()).toString());
 };
</script>
funciton GetData()
{
 var url = "请求地址";
 var data = {type:1};
 $.ajax({
  type : "get",
  async : false, //同步请求
  url : url,
  data : data,
  timeout:1000,
  success:function(dates){
  //alert(dates);
  $("#mainContent").html(dates);//要刷新的div
  },
  error: function() {
        // alert("失败,请稍后再试!");
      }
 });

另外注意,setTimeout()并不能定时刷新页面。setTimeout()设置之后,只会刷新一次,需要再次设置,才会再次刷新。

eg. setTimeout(function(){location.reload()},1000); //指定1秒后刷新一次

方法2

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的

JavaScript得到它的工作:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

setInterval(function() {
  $("#content").load(location.href+" #content>*","");
}, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。

页面整体刷新

1. 页面自动刷新注:其中10指每隔10秒刷新一次页面.

1 <meta http-equiv="refresh" content="10">

2.跳转到指定页面

1 <meta http-equiv="refresh" content="10;url=http://www.51jfgou.com">

参考文章

1.html页面实现自动刷新的几种方法

2.JQuery实现定时刷新功能代码

3. 如何定时刷新页面

时间: 2024-10-13 15:34:07

html 页面刷新的相关文章

笔记03 异常支持、防止页面刷新和后退、方法验证

Struts2对异常支持(声明式异常.自动的异常处理), 异常处理(运行期异常事务自动回滚) 1. 自定义异常类,继承RuntimeException或Exception实现构造方法. 2. 配置异常:全局页面跳转,与全局异常处理.其他包如果想使用,需要继承. <global-results> <result name="error">/error.jsp</result> <result name="input">/

ASP.NET—012:避免页面刷新造成的闪烁问题

本文继续说一个常识问题.大家都知道,ASP.NET页面都有一个page_load事件.当页面第一次加载时都会执行这个事件.而细心的童鞋肯定也发现,当给页面上的控件注册事件后,执行这个控件的事件时也会执行这个page_load.也就是说每点击一次事件都会刷新一次页面,造成页面闪烁.这样的效果是不好的.那么如何避免这个问题呢,当然是靠javascript了,以及高级一点的jQuery等.一般ASP.NET页面必然要配合javascript来实现功能了.页面控件的事件最好都用javascript来实现

AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共勉之. 页面正常加载后,显示如下: 按F5刷新之后,页面如下所示: 很明显,页面显示出现了异常.回过头再看看Chrome的错误提示, 具体代码如下: 正是以上代码导致了错误的发生. 追根溯源 让我们回顾一下,错误到底是如何发生的.正常加载情况下,页面正常显示很容易理解,程序是按照既定的数据流走的.但

ASP.NET页面刷新的实现方法总结

先看看ASP.NET页面刷新的实现方法: 第一: C#代码   private void Button1_Click( object sender, System.EventArgs e ) { Response.Redirect( Request.Url.ToString( ) ); } 第二: C#代码   private void Button2_Click( object sender, System.EventArgs e ) { Response.Write( " < scri

html-javascript前端页面刷新重载的方法汇总

记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总结一下,仅供大家参考! 一.javascript页面刷新重载的方法: <a href="javascript:location.reload();">点击重新载入页面</a> <a href="javascript:history.go(0);&qu

js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascri

页面刷新vuex数据消失问题解决方案

VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这是头疼的问题. 网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB). 这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下. 这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡

页面刷新 整个页面刷新和局部刷新

整个页面刷新 1.页面自动刷新:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面. 2.页面自动跳转:把如下代码加入<head>区域中 <meta http-equiv="refresh" content="20;url=“#"> 其中20指隔20秒后跳转到#页面 3.页面自动刷新

Ajax局部页面刷新

ajax自动刷新局部页面 通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据. AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面. 实验中利用JSP+ajax来实现自动刷新页面,并读/写数据库中的数据. 下面介绍一下利用JSP+ajax来实现局部页面刷新的

页面刷新vuex数据消失问题解决方案 之 vuex中间件

之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用  store.subscribe , 当时还有点觉得不可能,仔细再去看vuex官方文档. 这个还真的是可行,但当然也是存在不方便的地方的. 此方案现在已经应用我基于vue开发的音乐web app VBOX 上,欢迎大家给star. 基本方案和步骤如下 1. 简单的按照键复制对象 2. localStorage存储的封装