使用Ajax/Django更新動態創建的DIV

我真的試圖避免讓標題太模棱兩可，但我不太確定除了這樣的網頁開發新手之外，還有什麼別的措辭。使用Ajax/Django更新動態創建的DIV

這裏是場景，我創建了一個模板，通過一個對象列表循環，每個對象都有一個唯一的ID。舉例來說，我們稱這些對象爲「時鐘」。爲了簡單起見，我將模板代碼修剪到最低限度。

{% for clock in clock_list %} 
    <div id="clock_{{ clock.id }}"></div> 
{% endfor %}

這些DIV中的每一個都應該顯示一個定時器/時鐘的排序，這個定時器是唯一的。並且每一個應該在頁面上每秒遞增（頁面上最多運行10個時鐘）。

現在我花了很多時間試圖掌握如何使用AJAX（並隨時告訴我任何更簡單/更高效的替代方案），但我不確定是否瞭解AJAX正常工作。我怎麼能夠獨立地更新每個這些動態創建的div（或者至少讓它們都在同一個「setTimeout（function（），1000）」持續時間上更新）

下面是我爲AJAX引用的代碼：

<script type="text/javascript"> 
function Ajax(){ 

    var xmlHttp = new XMLHttpRequest(); 

    xmlHttp.onreadystatechange=function(){ 
     if(xmlHttp.readyState==4){ 
      document.getElementById('element_id').innerHTML=xmlHttp.responseText; 
      setTimeout('Ajax()',1000); 
     } 
    } 
xmlHttp.open("GET","content.html",true); 
xmlHttp.send(null); 
} 

window.onload=function(){ 
setTimeout('Ajax()',1000); 
}

我假設的想法是使用「時鐘_ {{vice.id}}」爲「的document.getElementById（ 'element_id'）的innerHTML = xmlHttp.responstText。「部分，但是如何使用django的循環模板來獲取包含div內容的」clock.html「文件的內容。

如果有人願意幫忙，需要更多的細節，請說出來。暫時我會繼續這個碰碰車編程，直到我有東西展示它:)。

來源

2011-04-03 django_noob

所以，你想有一個計時器爲你放在頁面上的每個div打勾嗎？首先，我建議你使用jQuery，這會讓你的生活更輕鬆。

我最近做了類似的事情。在我的情況下，我需要一個選擇器來選擇頁面上的div以及一個javascript日期，我構建了ticker正在滴答滴答的位置。然後我注射了每格一段JavaScript代碼（您可以通過動態加載AJAX這個），像這樣：

<html> 
    <head> 
    <script type="text/javascript"> 
     var timers = []; 

     // can update data by calling $.ajax or $.get or any of the ajax jquery calls 
    </script> 
    </head> 
    <body> 
    {% for clock in clock_list %} 
    <div class="countdown-target" id="countdown-target-{{ clock.id }}"> 
    </div> 
    <script type="text/javascript"> 
     timers.push({ selector: '#countdown-target-{{ clock.id }}', endTime: new Date(year, month-1, day, hour, minute, second) }); 
    </script> 
    {% endfor %} 

    <script type="text/javascript"> 
    function timerTick() { 
     for(var i in timers) { 
     var entry = timers[i]; 
     var now = new Date(); 
     var diff = now - entry.endTime; 

     var targetElement = $(entry.selector); 
     var countdownTicker = $('.countdown', targetElement); 

     // calculate the difference and update the ticker 
     countdownTicker.text(new_ticker_text_value); 
     } 
    } 
    // start one tick right away 
    timerTick(); 
    setInterval(timerTick, 1000); 
    </script> 
    </body> 
</html>

調用Web服務來返回推向定時器陣列能夠正常工作的新數據。

來源

2011-04-03 17:15:44 Max

感謝您的回覆。我不知道的一件事是這行：//可以通過調用$ .ajax或$ .get或任何ajax jquery調用來更新數據。這樣做的目的是什麼？ setInterval（timerTick，1000）不會每秒調用方法嗎？ countdownTicker.text（new_ticker_text_value）更新div的內容嗎？對不起所有的問題，我仍然在拼湊。 – 2011-04-04 00:45:45

對不起。該區域應該是您進行AJAX呼叫的地方。使用jQuery就像做$ .getJSON（url，function（response）{}）一樣簡單（假設你正在返回JSON）。當你得到你的迴應時，把數據推到定時器數組上。由於javascript代碼段中存在{{clock.id}}，因此我還編輯了我的條目。 – Max 2011-04-04 00:54:04

應該var countdownTicker = $（'。countdown'，targetElement）; be var countdownTicker = $（'。countdown-target'，targetElement）; ？只是好奇。 – 2011-04-04 01:07:38

使用Ajax/Django更新動態創建的DIV

回答

相關問題