jQuery实现AJAX定时刷新局部和全部页面实例(附jQuery1.2到最新3.3.1所有版本下载)

最新推荐文章于 2023-12-01 14:25:12 发布

叶玉恒

最新推荐文章于 2023-12-01 14:25:12 发布

阅读量3.4k

点赞数 32

分类专栏： JS 文章标签： java javascript ajax

本文链接：https://blog.csdn.net/weixin_45629315/article/details/105526650

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

方法一：

方法二：

全页面刷新技巧：

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

本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。

方法一：

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

例一（定时局部刷新）

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

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>   //加载用到的jQuery库文件
<script>
$(function(){
 setInterval(aa,10);             //10以毫秒为单位
 function aa(){
   $("#aa").append("fdsadfsa");
 }
})
</script>

例二（不断的更新时间）

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
setInterval("startRequest()",1000);
});
function startRequest()
{
$("#date").text((new Date()).toString());
}
</script>
</head>

例三

jsp页面的ajax


$("#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：

<div id="mainContent">

方法二：

有时，我需要某种机制，不断刷新网页（现在网页局部刷新很普遍），以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分，这将是很重要的，例如：实时的将数据库中的数据更新到页面中。

这是很容易通过使用jQuery JavaScript库，只刷新页面的一部分。在我们自己的页面中加入jQuery库，只需要1行的代码

JavaScript得到它的工作：

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js

注：详细的版本可以看：jquery下载,实时更新jquery1.2到最新3.3.1所有版本下载

所以我们只要在我们的页面中放入这个JS代码片就可以段刷新里面的内容ID标签的一切，每5秒刷新一次div：

<script type="text/javascript">
        setInterval(function () {
            $("#IDname").load(location.href + " #IDname>*","");//注意后面DIV的ID前面的空格，很重要！没有空格的话，会出错（也可以使用类名）
        }, 5000);                         //5秒自动刷新
</script>

//每5秒，我们将刷新内容相同的URL和所有元素，驻留在元素ID为IDname元素的内容

因此，这是很容易完成一些实时监控的行为，只是几行代码。没有更奇怪的元刷新标记或iframe一种解决方法，比较的容易理解，适合新手。

这是我自己学到的简单的页面局部自动刷新的一些例子，希望对看到的你有所帮助。

全页面刷新技巧：

<meta http-equiv="refresh" content="3">（写在head中，content=“3”为三秒）

window.location.reload()刷新当前页面.

parent.location.reload()刷新父亲对象（用于框架）

opener.location.reload()刷新父窗口对象（用于单开窗口）

top.location.reload()刷新最顶端对象（用于多开窗口）

相互学习，如有错误请各位指出！！！！！

No pains No results

叶玉恒

关注

32
点赞
踩
18

收藏

觉得还不错? 一键收藏
25
评论
jQuery实现AJAX定时刷新局部和全部页面实例(附jQuery1.2到最新3.3.1所有版本下载)

目录jQuery实现AJAX定时刷新局部页面实例方法一：方法二：jQuery实现AJAX定时刷新局部页面实例本篇文章通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。方法一：局部刷新我们讲述到最多的是a...
复制链接

扫一扫