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

Я создаю приложение чата. До сих пор я добавляю сообщения чата с jquery $.post () и это отлично работает.

теперь мне нужно получить последнее сообщение чата из таблицы и добавить список на странице чата. Я новичок в Django, поэтому, пожалуйста, не спешите.

Итак, как мне получить данные из таблицы чата обратно на страницу чата?

спасибо заранее!

6
ajax django django-templates jquery python

3 ответов

моя любимая техника для такого рода вещей является использование включение тега

в основном вы делаете отдельный шаблон для рендеринга отдельных объектов в шаблоне страницы

шаблон страницы:

{% 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 файл будет содержать всю разметку для отображения фактического сообщения на странице...

надеюсь, это все поможет:)

13

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

2

там очень много происходит для того, чтобы сделать этот процесс работы...

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

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

2