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 post，为什么不返回其中的数据并将其插入到div中呢？接受post的视图可以返回呈现的模板或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 id="chatbox">的<div>标记，它将保存任何传入的聊天消息。我们的javascript simple需要轮询我们创建的服务器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>

当然，我还没有测试过这些，但我希望这能让您对整个过程有一个了解。