快捷導(dǎo)航

jQuery實(shí)現(xiàn)AJAX定時刷新局部頁面實(shí)例

更新時間：2015年09月23日 09:40:58 投稿：mrr

本篇文章通過兩種方法實(shí)例講解ajax定時刷新局部頁面，當(dāng)然方法有很多種，也可以不使用ajax來刷新頁面，可以使用jquery中的append來給指定內(nèi)容加?xùn)|西，但是都不太實(shí)用，最實(shí)用的方法還是ajax加載數(shù)據(jù)了。

方法一：

局部刷新我們講述到最多的是ajax 了，當(dāng)然也可以不使用ajax來刷新頁面了，我們可以使用jquery中的append來給指定內(nèi)容加?xùn)|西了，當(dāng)然最實(shí)用的還是ajax加載數(shù)據(jù)了。

例子，定時局部刷新

定時局部刷新用到j(luò)Query里面的setInterval方法，setInterval方法兩個參數(shù)，第一個是設(shè)置定時執(zhí)行的函數(shù)名，第二個是時間，如下代碼所示，設(shè)置每隔10微秒定時執(zhí)行一次aa方法。

<script>
$(function(){
 setInterval(aa,10);
 function aa(){
   $("#aa").append("fdsadfsa");
 }
})
</script>

例子2

<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 下面我們就看一下這種刷新方式是如何實(shí)現(xiàn)的。

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

注意：后臺需要針對div里的信息單獨(dú)用一個jsp頁面，不然就需要自己封裝好需要的頁面信息返回

方法二：

不時，我需要某種機(jī)制，不斷刷新網(wǎng)頁，以提供一個實(shí)時的儀表板某種。如果我只能刷新一個特定的頁面的一部分，這將是很大的，例如：儀表盤上的交通燈顯示系統(tǒng)狀態(tài)。

這是很容易通過使用jQuery JavaScript庫，只刷新頁面的一部分。一旦我們納入我們的頁面的jQuery庫，我們只需要1行的

JavaScript得到它的工作：

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

所以我們只要我們的頁面放入這個小的JS代碼片段刷新里面的內(nèi)容ID標(biāo)簽的一切，讓我們說，每5秒：

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

這就是它！！因此，這是很容易完成一些實(shí)時監(jiān)控的行為，只是那行代碼。沒有更奇怪的元刷新標(biāo)記或iframe一種解決方法，在Web應(yīng)用程序。

每5秒，我們將刷新內(nèi)容相同的URL和所有元素，駐留在元素ID為content元素的內(nèi)容：內(nèi)容。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

jQuery實(shí)現(xiàn)AJAX定時刷新局部頁面實(shí)例

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具