jQuery实现AJAX定时刷新局部页面实例

本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,

但是都不太实用,最实用的方法还是ajax加载数据了。

方法一:

局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。

例子,定时局部刷新

定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法。

?


1

2

3

4

5

6

7

8

<script>

$(function(){

 setInterval(aa,10);

 function aa(){

   $("#aa").append("fdsadfsa");

 }

})

</script>

例子2

?


1

2

3

4

5

6

7

8

9

10

11

12

<head>

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

<script>

$(document).ready(function () {

setInterval("startRequest()",1000);

});

function startRequest()

{

$("#date").text((new Date()).toString());

}

</script>

</head>

例子3 下面我们就看一下这种刷新方式是如何实现的。

jsp页面ajax

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$("#waitWork").click(function(){

 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("失败,请稍后再试!");

      }

 });

 });

html

?


1

<div id="mainContent">

注意:后台需要针对div里的信息单独用一个jsp页面,不然就需要自己封装好需要的页面信息返回

方法二:

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

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

JavaScript得到它的工作:

?


1

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

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

?


1

2

3

setInterval(function() {

  $("#content").load(location.href+" #content>*","");

}, 5000);

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

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

时间: 2024-10-09 03:03:56

jQuery实现AJAX定时刷新局部页面实例的相关文章

Struts2+Jquery+实现Ajax无刷新验证用户名是否存在

小弟之前一直搞不明白Struts2+Jquery+实现Ajax无刷新验证用户名该怎么弄,后来经过努力,终于搞定了,应注意struts配置文件的内容,好了直接上代码了 页面代码 <body> <s:form action="registAction" method="post" namespace="/user"> <table> <tr> <td>UserName</td>

JQuery的Ajax请求实现局部刷新的简单实例

我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改变图标. 1.页面 给每条记录的图标一个唯一的id值: 代码如下: <td align="center">    <s:if test="messageState == 0"><img src

jQuery中,Ajax发送后刷新局部页面的方法

应用场景: 用户点击功能,JavaScript动态生成DOM树,然后用户点击删除,删除成功后,刷新该页面 思路: 将要发送的Ajax用一个函数存起来 然后,当用户点击时,执行该函数,然后生成该DOM树, 再然后,当用户点击该页面上的删除按钮时,发送一个删除命令的Ajax请求,删除完成后,再次调用该函数,请求数据,完成刷新需求. function navlist(){ $("#content").html( "<table class='table table-borde

struts2+jquery 实现ajax无刷新更新数据

前几天为了实现一个struts 的 ajax无刷新更新数据的例子,发现网上资料很少,很多已经过时或者链接都失效了 不过整合他们的资料,加上自己的研究,终于实现了效果 要求:1.各个学院提交学生数据到服务器,要求ajax 无刷新更新数据, 2.服务器端返回"更新成功"的提示窗口: 3.之后,使用jquery 更新input输入框的value值,为实现jquery 打印页面局部数据做准备. 此处使用struts2的第二种方法,(修改struts 配置文件,增加ajax package 的方

PHP定时刷新当前页面

PHP中定时刷新页面的功能如何实现! 1分钟刷新一次页面! 这一般不用php实现,用客户端的脚本就可以,甚至用html自带的就行. html实现: <meta http-equiv="refresh" content="60"> echo "<META HTTP-EQUIV=REFRESH CONTENT='60;URL=index.php'>"; php刷新当前页面 echo "<script langu

jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法

文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input type="button" onclick="post()" value="提交"/>就不会刷新页面了!!! 参考 http://bbs.csdn.net/topics/391852021 what fuck ... sb html   我在那

上次的AJAX定时刷新多ID不正确,这次请教了高手之后补全

关键是setInterval无法传递参数,所以用了匿名函数再包裹一下就好了. //重置发布进度 function resetPercent(id_data){ $.ajax({ url:'/autodeploy/reset_percent/' + id_data, success: function(json){ }, }); }; //间隔刷新,显示百分比,AJAX调用rest_framework框架 var _interval = {}; function showPercent(id_da

asp.net 定时刷新局部界面

前台: <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional&q

js jquery 关闭弹出页面 并刷新父页面(window.opener)

function Closepage() { if (window.opener && !window.opener.closed) { window.parent.opener.location.reload(); } window.close(); return false; } 其它方法可借鉴: window.opener用法 http://www.cnblogs.com/zhangzt/archive/2009/12/24/1631253.html window.opener 实际