使用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

回答

相关问题