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

偏执的太偏执、 2023-07-25 12:43 12阅读 0赞

**目录**

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

方法一：

方法二：

全页面刷新技巧：

--------------------

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

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

## 方法一： ##

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

### 例一（定时局部刷新） ###

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

### 例二（不断的更新时间） ###

<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：

## 方法二： ##

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

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

JavaScript得到它的工作：

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

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

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

因此，这是很容易完成一些实时监控的行为，只是几行代码。没有更奇怪的元刷新标记或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***

[jquery_jquery1.2_3.3.1]: https://www.cnblogs.com/it-tsz/p/10283929.html