使用Ajax / Django更新动态创建的DIV

时间:2011-04-03 02:44:10

标签: javascript ajax django html

我真的试图避免使标题太模糊,但我不太确定如何用它来表达它(因为这样的网络开发菜鸟)。

这是一个场景,我创建了一个模板,循环遍历一个对象列表,每个对象都有一个唯一的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);
}

我认为这个想法是使用“clock _ {{vice.id}}”作为“document.getElementById('element_id')。innerHTML = xmlHttp.responstText;”部分,但我如何使用django的模板循环来获取并获取包含div内容的“clock.html”文件的内容。

如果有人愿意提供帮助并需要更多详细信息,请说明。暂时我将继续这个bumpercar编程,直到我有东西要显示它:)。

1 个答案:

答案 0 :(得分:1)

所以你想让你在页面上放置的每个div都有一个计时器?首先,我建议您使用jQuery,这将使您的生活更轻松。

我最近做过类似的事。在我的情况下,我需要一个选择器来选择页面上的div以及我构建的javascript日期,其中自动收报机正在向下移动。然后我为每个div注入了一段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服务以返回推送到计时器阵列的新数据将正常工作。