用jquery定時器重新加載div

我試圖刷新頁面上的div，顯示頁面的服務器名稱。這只是爲了測試，所以我們可以測試當auth cookie超時時會發生什麼。我想用jQuery來做到這一點，但我似乎無法得到任何工作。我在網上找到了一個我一直在努力的例子，但也不斷收到錯誤。用jquery定時器重新加載div

我們在每臺僅包含服務器名稱的服務器上都有一個html頁面。這是我們希望在div中顯示的那個頁面的文本。

下面是我找到的代碼示例。有人能幫我嗎？我對jquery很新。任何幫助將不勝感激。

感謝，

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js"></script> 
<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.timers-1.0.0.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var j = jQuery.noConflict(); 
     j(document).ready(function() { 
      j(".refreshMe").everyTime(5000, function (i) { 
       j.ajax({ 
        url: "refresh.html", 
        cache: false, 
        success: function (html) { 
         j(".refreshMe").html(html); 
        } 
       }) 
      }) 
     }); 
     j('.refreshMe').css({ color: "red" }); 
    }); 
</script>

來源

2011-03-21 Rhonda

試試這個：

$(document).ready(function() { 
    var interval = 500; //number of mili seconds between each call 
    var refresh = function() { 
     $.ajax({ 
      url: "path/to/server/page.php", 
      cache: false, 
      success: function(html) { 
       $('#server-name').html(html); 
       setTimeout(function() { 
        refresh(); 
       }, interval); 
      } 
     }); 
    }; 
    refresh(); 
}); 

<div id="server-name"></div>

那麼發生了什麼？

一旦頁面準備就緒，我將打電話給refresh，然後ajax調用path/to/server/page.php，這將返回所需的結果。

我在div#server-name顯示結果，然後我做一個setTimeout這將再次調用refresh每interval毫秒。

來源

2011-03-21 23:01:02 moe

可能最好使用同步調用而不是$ .ajax。根據響應時間，異步調用可能會很快失去同步。 – GregB 2011-03-21 23:16:30

那麼，這在我創建的用於測試它的小HTML頁面中效果很好。但是，它不想在aspx頁面中工作，我實際需要運行它。我將繼續玩它，看看我能否得到它的工作。 – Rhonda 2011-03-21 23:37:45

謝謝你的方式。 – Rhonda 2011-03-21 23:38:02

Rhonda，

這是另一個可以嘗試的例子。你使用的是MVC還是ASP.NET WebForms？

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var timer = setInterval(updateDiv, 5000); 
      var counter = 0; //only here so we can see that the div is being updated if the same error is thrown 

      function updateDiv() { 
       var messageDiv = $('#content'); 
       $.ajax({ 
         type: 'GET', 
         async: false, 
         url: "your.site.com/path/page.ext", 
         cache: false, 
         success: function(result) { 
          counter++; 
          messageDiv.empty(); 
          messageDiv.append(result); 
          messageDiv.append("<br />"); 
          messageDiv.append("counter = " + counter); 
         }, 
         error: function(xhr, ajaxOptions, thrownError) { 
          counter++; 
          messageDiv.empty(); 
          messageDiv.append("thrown error: " + thrownError); 
          messageDiv.append("<br />"); 
          messageDiv.append("status text: " + xhr.statusText); 
          messageDiv.append("<br />"); 
          messageDiv.append("counter = " + counter); 
         } 
       }); 
      } 

     }); 
    </script> 
</head> 
<body> 
    <h2>Div is below here</h2> 
    <div id="content"></div> 
</body> 
</html>

來源

2011-03-21 23:49:16 GregB

您可以通過使用.html來快捷代碼來更新DIV，但是我想分解它，所以很清楚。 – GregB 2011-03-21 23:52:38

用jquery定時器重新加載div

回答

相關問題