DJANGO: обновление div с помощью AJAX

Поскольку вы уже используете сообщение AJAX, почему бы вам не вернуть данные из него и не вставить их в div? Представление, которое принимает сообщение, может возвращать отрисованный шаблон или JSON, и ваш javascript может вставить его в обратный вызов.

Чтобы этот процесс заработал, нужно многое сделать...

• клиент регулярно опрашивает сервер на предмет новых записей в чате
• сервер проверяет и отвечает только с новейшим
• клиент получает самые новые записи и добавляет их в 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>

Конечно, я не проверял ничего из этого, но надеюсь, что это даст вам представление о том, как все это происходит.