我真的试图避免使标题太模糊,但我不太确定如何用它来表达它(因为这样的网络开发菜鸟)。
这是一个场景,我创建了一个模板,循环遍历一个对象列表,每个对象都有一个唯一的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编程,直到我有东西要显示它:)。
答案 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服务以返回推送到计时器阵列的新数据将正常工作。