DJANGO：用AJAX更新div

Question

我正在構建一個聊天應用程序。到目前爲止，我正在使用jQuery $ .post（）添加聊天消息，並且此工作正常。

現在我需要從表中檢索最新的聊天消息，並在聊天頁面追加列表。 我是Django的新手，所以請慢一點。

那麼如何從聊天表中獲取數據返回聊天頁面呢？

在此先感謝！

Answer 1

我最喜歡這種事情的方法是使用一個inclusion tag

基本上你做一個單獨的模板在頁面模板呈現的單個對象

頁面模板：

{% load message_tags %}  

<h3>Messages</h3> 
<div class="message_list"> 
    {% for message in messages %} 
     {% render_message message %} 
    {% endfor %} 
</div> 

templatetags/message_tags.py：

from django import template 

register = template.Library() 

@register.inclusion_tag('individual_message.html') 
def render_message(message): 
    context_for_rendering_inclusion_tag = {'message': message} 
    return context_for_rendering_inclusion_tag 

現在你可以使用相同的模板來呈現你想要添加到一個單獨的視圖的message_list DIV，你可以從你的Ajax代碼

def ajax_retrieve_latest_message(request): 
    # ... Get the lastest message 
    render_to_response('individual_message.html', ... 

呼叫，您jQuery將看起來像另外的消息.. 。

$.post(url_of_ajax_view, request_data, function(data, status) { 
    if (status == 'success') { 
     $(".message_list").append(data); 
    } 
}); 

爲了完整起見，你individual_message.html文件將包含所有的標記在頁面上顯示實際的消息...

希望這一切都有助於:)

Answer 2

由於您已經在使用AJAX文章，爲什麼不從數據中返回數據並將其插入到div中？接受帖子的視圖可以返回呈現的模板或JSON，並且您的javascript可以將其插入到回調中。

Answer 3

有很多爲了使這個過程的工作正在進行...

• 客戶定期輪詢新的聊天條目
• 服務器檢查服務器和僅與最新回覆
• 客戶端接收最新的條目，並將它們附加到DOM

這會引起混亂，當你第一次啓動，因爲它並不總是很清楚客戶做什麼和服務器的操作，但如果大問題細分我認爲你會發現這是一個簡單的過程。

如果客戶端要定期輪詢服務器以查找新的聊天條目，那麼服務器（django）需要有某種類型的API才能這樣做。您最大的決定將是服務器返回的數據類型。您可以選擇：呈現的HTML，XML，YAML或JSON。最輕的重量是JSON，並且受到大多數主要javascript框架的支持（並且由於它非常棒，django包含JSON序列化程序）。

# Your model I'm assuming is something to the effect of... 
class ChatLine(models.Model): 
    screenname = model.ChatField(max_length=40) 
    value = models.CharField(max_length=100) 
    created = models.DateTimeField(default=datetime.now()) 

# A url pattern to match our API... 
url(r'^api/latest-chat/(?P<seconds_old>\d+)/$',get_latest_chat), 

# A view to answer that URL 
def get_latest_chat(request, seconds_old): 
    # Query comments since the past X seconds 
    chat_since = datetime.datetime.now() - datetime.timedelta(seconds=seconds_old) 
    chat = Chat.objects.filter(created__gte=comments_since) 

    # Return serialized data or whatever you're doing with it 
    return HttpResponse(simplejson.dumps(chat),mimetype='application/json') 

所以每當我們輪詢我們的API，我們應當得到這樣的事情..

[ 
    { 
     'value':'Hello World', 
     'created':'2009-12-10 14:56:11', 
     'screenname':'tstone' 
    }, 
    { 
     'value':'And more cool Django-ness', 
     'created':'2009-12-10 14:58:49', 
     'screenname':'leethax0r1337' 
    }, 
] 

在我們實際的頁面，我們有一個<div>標籤，我們稱之爲<div id="chatbox">將舉行什麼傳入的聊天消息是。我們的javascript簡單需要輪詢我們創建的服務器API，檢查是否有響應，然後如果有項目，則將它們追加到聊天框中。

<!-- I'm assuming you're using jQuery --> 
<script type="text/javascript"> 

    LATEST_CHAT_URL = '{% url get_latest_chat 5 %}'; 

    // On page start... 
    $(function() { 
     // Start a timer that will call our API at regular intervals 
     // The 2nd value is the time in milliseconds, so 5000 = 5 seconds 
     setTimeout(updateChat, 5000) 
    }); 

    function updateChat() { 
     $.getJSON(LATEST_CHAT_URL, function(data){ 
      // Enumerate JSON objects 
      $.each(data.items, function(i,item){ 
       var newChatLine = $('<span class="chat"></span>'); 
       newChatLine.append('<span class="user">' + item.screenname + '</span>'); 
       newChatLine.append('<span class="text">' + item.text + '</span>'); 
       $('#chatbox').append(newChatLine); 
      }); 
     }); 
    } 

</script> 

<div id="chatbox"> 
</div> 

當然現在我沒有測試過任何這一點，但我希望，讓你對整個如何去在一起的想法。