我真的試圖避免讓標題太模棱兩可,但我不太確定除了這樣的網頁開發新手之外,還有什麼別的措辭。使用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「文件的內容。
如果有人願意幫忙,需要更多的細節,請說出來。暫時我會繼續這個碰碰車編程,直到我有東西展示它:)。
感謝您的回覆。我不知道的一件事是這行://可以通過調用$ .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