用ajax更新div,DJANGO：用AJAX更新div

为了让这个过程有效，我们要做很多事情。。。在客户机定期轮询服务器以查找新的聊天条目

服务器检查并仅答复最新的

客户机接收最新的条目并将它们附加到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\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时，我们都应该得到这样的结果。。在

^{pr2}$

在我们实际的页面上，我们有一个

标记，我们将其称为

，它将保存任何传入的聊天消息。我们的javascript simple需要轮询我们创建的服务器API，检查是否有响应，然后如果有条目，将它们附加到聊天框中。在

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 = $('');

newChatLine.append('' + item.screenname + '');

newChatLine.append('' + item.text + '');

$('#chatbox').append(newChatLine);

});

});

}

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