DJANGO: Update div with AJAX

Question

Buduję aplikację do czatu. Do tej pory dodaję wiadomości na czacie za pomocą jquery $ .post() i działa to dobrze.

Teraz muszę pobrać najnowszą wiadomość czatu z tabeli i dołączyć listę na stronie czatu. Jestem nowy w Django, więc proszę idź powoli.

Jak mogę odzyskać dane ze stołu czatowego na stronie czatu?

Z góry dziękuję!

Answer 1

Moja ulubiona technika dla tego rodzaju rzeczą jest użycie inclusion tag

zasadzie można zrobić oddzielny szablon do renderowania poszczególnych obiektów w szablonie strony

szablon strony:

{% 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 

teraz można używać tego samego szablonu do renderowania dodatkowych wiadomości, które chcesz dodać do message_list div w odrębnym widoku, który można dzwonić z kodu ajax

def ajax_retrieve_latest_message(request): 
    # ... Get the lastest message 
    render_to_response('individual_message.html', ... 

A twój jQuery będzie wyglądać .. .

$.post(url_of_ajax_view, request_data, function(data, status) { 
    if (status == 'success') { 
     $(".message_list").append(data); 
    } 
}); 

dla kompletności, plik individual_message.html będzie zawierać wszystkie znaczniki do wyświetlania rzeczywistej wiadomość na stronie ...

Nadzieja to wszystko pomaga :)

Answer 2

Ponieważ używasz już posta AJAX, dlaczego nie zwrócisz z niego danych i wstawisz go do div? Widok, który akceptuje wpis, może zwrócić wyrenderowany szablon lub JSON, a Twój javascript może go wstawić do wywołania zwrotnego.

Answer 3

Dużo dzieje się w celu dokonania tej pracy procesu ...

• klienckie regularnie odpytuje serwer dla nowych zapisów rozmów
• Serwer sprawdza i odpowiada jedynie z najnowszym
• Klient odbiera najnowsze wpisy i dołącza je do DOM

Może to być mylące podczas pierwszego uruchomienia, ponieważ nie zawsze jest jasne, co klient robi i co robi serwer, ale jeśli duży problem jest w podziale Myślę, że przekonasz się, że to prosty proces.

Jeśli klient będzie regularnie odpytywał serwer w poszukiwaniu nowych wpisów czatu, serwer (django) musi mieć do tego pewien typ interfejsu API. Twoją największą decyzją będzie typ danych, które zwróci serwer. Możesz wybrać: renderowany HTML, XML, YAML lub JSON. Najlżejsza waga to JSON i jest obsługiwana przez większość głównych frameworków javascript (a django zawiera serializator JSON, ponieważ jest niesamowity).

# 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') 

Więc ilekroć odpytywać nasz API, powinniśmy wrócić coś takiego ..

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

na naszej rzeczywistej strony, mamy <div> tag, który będziemy nazywać <div id="chatbox"> który odbędzie cokolwiek przychodzące wiadomości czatu są. Nasz skrypt javascript musi odpytać stworzony przez nas interfejs API serwera, sprawdzić, czy istnieje odpowiedź, a następnie, jeśli istnieją elementy, dołączyć je do okna czatu.

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

Teraz oczywiście nie testowałem żadnej z tego, ale mam nadzieję, że daje wyobrażenie o tym, jak cały idzie w parze.