DJANGO：使用 AJAX 更新 div

Question

我正在构建一个聊天应用程序。到目前为止，我正在使用 jquery $.post() 添加聊天消息，并且效果很好。

现在我需要从表格中检索最新的聊天消息并将列表附加到聊天页面上。 我是 Django 新手，所以请慢慢来。

那么如何将聊天表中的数据返回到聊天页面呢？

提前致谢！

Answer 1

为了使这个过程发挥作用，还有很多事情要做......

• 客户端定期轮询服务器以获取新的聊天条目
• 服务器检查并只回复最新的
• 客户端接收最新条目并将它们附加到 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 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>

当然，我还没有测试过这些，但我希望这能让你了解整体如何结合在一起。

Answer 2

我最喜欢的技术是使用inclusion tag

基本上你制作一个单独的模板来渲染页面模板中的各个对象

页面模板：

{% load message_tags %}    

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

模板标签/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 3

既然您已经在使用 AJAX 帖子，为什么不从中返回数据并将其插入到 div 中呢？接受帖子的视图可以返回一个呈现的模板或 JSON，您的 javascript 可以将其插入到回调中。