如何動態更新網頁的不同部分？

我有一個腳本，更新我的網站的信息，它每秒從另一個頁面加載日期，並與此我可以在我的網站上有一個時鐘更新第二。不過，我想做同樣的事情，但與我的網站的另一部分。如何動態更新網頁的不同部分？

這是代碼即時通訊使用至今：

<script type="text/javascript" charset="utf-8"> 

    $(document).ready(function() 
    { 
     $("#myDiv").load("response.php"); 
     var refreshId = setInterval(function() 
     { 
      $("#myDiv").load('time.php'); 
     }, 1000); 
    }); 

</script>

，然後當我是顯示我在使用的時候：

<div id="myDiv"> </div>

所以，我怎麼能使用它的另一部分我網站？編寫腳本並將'#myDiv'更改爲'＃myDiv2'之類的其他方式是明智的嗎？還是有另一種方法可以在同一個腳本中完成？

我想知道這種情況的最佳做法。

謝謝你的時間。

來源

2012-01-10 ragebunny

@ragebunny：它不會說這是一個很好的做法來調用頁面只有時間，我會說最好花一些時間使用JavaScript來添加時間。這不適合？ – netadictos 2012-01-10 16:19:34

@netadictos是的，這是有道理的。謝謝。 – ragebunny 2012-01-10 17:32:37

@piskvor我已經通過代碼工作並粘貼了原始文件，但更改了div，現在這個工作是因爲它有一個新功能，但是我想知道它的良好實踐還是有更好的方法來實現它。時間可以用JS完成，但另一部分是需要不斷從數據庫刷新的部分。 – ragebunny 2012-01-10 17:32:52

個人而言，我更喜歡一個更聲明式的，所以像

HTML：

<div data-update="newContent.php" data-refresh-interval="500"></div>

的Javascript：

$('[data-update]').each(function() { 
    var self = $(this); 
    var target = self.data('update'); 
    var refreshId = setInterval(function() { self.load(target); }, self.data('refresh-interval')); 
});

這種方法意味着所有的信息來識別在頁面更新的生活HTML，那麼當你只需要查看視圖來弄清楚會發生什麼時，它就會（更希望！）更容易推理頁面。它還使得向其他頁面添加功能變得更加容易，因爲只需要使用相同的標記即可。

來源

2012-01-10 15:21:36

+1好主意... – 472084 2012-01-10 15:23:04

這是一個好主意，總是要記住，這隻適用於HTML 5（我指的是W3C HTML驗證）。 – netadictos 2012-01-10 16:20:30

謝謝你的幫助。 – ragebunny 2012-01-10 17:35:50

$("#myDiv").load("response.php"); 
$("#myDiv2").load("response2.php"); 
var refreshId = setInterval(function() 
{ 
    $("#myDiv").load('time.php'); 
    $("#myDiv2").load('time2.php'); 
}, 1000);

像這樣，它應該工作，我認爲。

來源

2012-01-10 15:17:46 Fildor

一般來說：
這裏的最佳做法是將該代碼存儲在外部js文件中，並將其加載到您需要的每個頁面上。

對於剛剛顯示的時間（並使用來自load.php返回的標記）的元素：
你可以做的是使用jQuery插入#myDiv元素時，頁面加載，並在功能收集這些功能，如下：

$(document).ready(function() { 
    function insert_time_element(id) { 
     // Cache the variables. See jQuery best practices 
     var $myDiv = $(document).append('<div id="' + id + '"></div>'); 

     // Your code (slighty altered): 
     // Could also be cached. 
     $myDiv.load("response.php"); 
     var refreshId = setInterval(function() { 
      $myDiv.load('time.php'); 
     }, 1000); 
    } 

    insert_time_element('myDiv'); 
});

對於專門jQuery的最佳實踐，閱讀jQuery的最佳做法NETTUTS +文章：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

來源

2012-01-10 15:27:37

如何動態更新網頁的不同部分？

回答

相關問題