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>

现在我当然没有测试任何这个，但我希望能让你了解整体如何结合。

DJANGO：用AJAX更新div

3 个答案: