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

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 в отдельном окне, которое можно вызвать из вашего АЯКС кода

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> 

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