DJANGO：AJAXでdivを更新

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 

今、あなたはあなたがあなたのAjaxコード

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

から呼び出すことができ、あなたのjQueryのようになります。..別のビューでmessage_listのdivに追加する追加メッセージをレンダリングするために同じテンプレートを使用することができます完全のために。

$.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 id="chatbox">と呼ぶことにします<div>タグを持っています入ってくるチャットメッセージはです。私たちの作成したサーバー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> 

は今のもちろん、私はこれのいずれかをテストしていませんが、私はそれはあなたの全体が一緒に行く方法についてのアイデアを提供したいと考えています。