Jquery DJANGO：使用AJAX更新div

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

现在我需要从表中检索最新的聊天信息，并将列表附加到聊天页面上。 我刚到Django，所以请慢一点

那么，如何将数据从聊天表返回聊天页面呢

---

提前谢谢

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

我最喜欢的技术是使用

基本上，您可以创建一个单独的模板来呈现页面模板中的各个对象

页面模板：

{% load message_tags %}    

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

现在，您可以使用相同的模板在单独的视图中呈现要添加到

message\u列表中的其他消息，您可以从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);
    }
});

为完整起见，您的
个人消息.html
文件将包含用于在页面上显示实际消息的所有标记

希望这些都能有所帮助：）
为了让这个过程正常运行，还有很多事情要做


客户端定期轮询服务器以查找新的聊天条目
服务器检查并仅回复最新的
客户端接收最新的条目并将它们附加到DOM中

当您第一次启动时，这可能会令人困惑，因为并不总是清楚客户端和服务器做什么，但是如果大问题被解决了，我想您会发现这是一个简单的过程

如果客户端要定期轮询服务器以获取新的聊天条目，那么服务器（django）需要某种类型的API来完成这项工作。您最大的决定将是服务器返回的数据类型。您可以选择：呈现的HTML、XML、YAML或JSON。最轻量级的是JSON，它受到大多数主要javascript框架的支持（django包括一个JSON序列化程序，因为它太棒了）

在我们的实际页面上，我们有一个
标签，我们称之为
，它将保存任何传入的聊天信息。我们的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>


LATEST_CHAT_URL='{%URL获取_LATEST_CHAT 5%}'；
//在第页开始。。。
$（函数（）{
//启动一个定时器，定时调用我们的API
//第二个值是以毫秒为单位的时间，因此5000=5秒
设置超时（updateChat，5000）
});
函数updateChat（）{
$.getJSON（最新的聊天URL，函数（数据）{
//枚举JSON对象
$.each（data.items，function（i，item）{
var newChatLine=$（''）；
newChatLine.append（“”+item.screenname+“”）；
newChatLine.append（“”+item.text+“”）；
$（“#chatbox”）.append（newChatLine）；
});
});
}

当然，我还没有测试过这一切，但我希望这能让你了解整个过程是如何进行的。
你好，丹尼尔！那么我将在div后面附加（）值？我需要每x秒用最新的帖子更新div。。
# 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')

[
    {
        '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'
    },
]

<!-- 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>