最初にページをレンダリングし、同じテンプレートを使用してAJAX経由で更新するHTML

Question

「View Story」というビューは、Python/Django経由でバックエンドでレンダリングされた単なるWebページです。そのページには、Djangoのテンプレートシステム（ループ内）を使用している "View Story"テンプレートの一部としてレンダリングされた一番下のコメントのリストがあります。このページでは、リストにコメントを追加することもできます。これはAJAXによって行われ、ページは新しいコメントで更新されます（新しい全ページ要求を送信することなく）。

新しいコメントをリストの末尾に追加すると、この新しいコメント（<li>の中にあるもの）のために生成されたHTMLが元のコメントを生成するために使用されたのとまったく同じコードを使用します。クライアントに送信します。これを行うには複数の方法があります

：

1. は、最初のレンダリングはjavascriptの変数にコメントデータを投げる持って、ページがレンダリングされるとJavaScriptを介してコンテンツを追加します。新しいコメントが追加されると、同じJavaScriptが新しいものを表示するために使用されます。問題は：検索エンジンの観点から私は、ページがレンダリングされた後に生成された場合、Googleがコメントを索引付けできるかどうかわからない - 私は推測していないと思う。

2. 新しいコメントが追加されるたびにAJAXを介して、新しいコメントのJSONデータだけでなく、ページに入れるためにajaxリクエストで実際のHTMLを返すようにします。元のページのレンダリングに使用されたのと同じテンプレートスニペットを使用してHTMLを生成できます。これの問題は、AJAXのリクエストを特定のビューまたは私が気に入らないレンダリングの方法に結び付けることです。

3. ＃2と似ている点を除いて、新しいコメントまたはすべてのコメントのHTMLを取得するために別個のリクエストが行われ、リストが消去されて再レンダリングされる点が異なります。それは深く非効率的で、不必要に時間を消費するためです。

要約すると、テンプレート/ HTMLコードを1つのビューに複製しないようにする方法が必要です。そして、私は、これがバックエンドの技術に関係なく一般的なケースであると確信しているので、他の人のために働いていたことについていくつかアドバイスをしたいと思います。

ありがとうございます！

Answer 1

私はオプション2が最適だと思います。インクリメンタルです（コメントが追加されたときにもう1つのコメントがレンダリングされます）。レンダリングが再利用されます。 AjaxリクエストからHTMLだけを返すのが気に入らない場合は、レスポンスをHTMLを単なるコンポーネントとして含むJSON構造にしてください。次に、HTMLを取得するための追加の要求なしでステータス（または何でも）を運ぶことができます。

オプション1は無駄です。サーバーは最初に表示されるはずのページをレンダリングする必要があります。

オプション3も無駄です。なぜ、1つのコメントを追加する2つのリクエストを行うのですか？ここで

Answer 2

は、あなたが何をすべきかです：

view_story。HTML：あなたがコメント（AJAX）を追加するためのビューを作成する必要があるよりも、

bla bla bla 

Comments: 
<ul id="comments"> 
{% for comment in comments %} 
    <li>{% include "comment_item.html" %}</li> 
{% endfor %} 
</ul> 
<from>Ajax form here</form> 

：

def add_comment(request): 
    comment = Comment(...) 
    return render_to_response('comment_item.html', {'comment': comment}) 

ですから、ビューをadd_commentためにあなたのAjaxのクエリを提出した後、コメントの内容を取得します（1件のコメント）..それだけでそれをリストにプッシュする。.. feこのようにjQueryを使用する：

$('ul#comments').append('<li>'+comment_content+'</li>') 

Answer 3

ありもオプション4：リストで

コピーし、既存の要素とその値を変更します。もちろんこれはテンプレートよりも柔軟性がありません。代わりに隠し要素をコピーして、リストが空のケースを処理することができます。

また、オプション2bとを試みることができる：

オプション2のように、サーバー上のHTMLを生成しますが、その代わりに、直接データベースにアクセスするための、生成ルーチンJSON（または簡単にJSONに変換できるオブジェクトを渡します）。これにはより多くの作業が必要ですが、自分のウェブサイトを作成すると同時に効果的にAPIを作成していることを意味します。

オプション1は、Web以外のアプリケーションで使用されるものです。検索エンジンはAJAXを処理する能力が向上していますが、HTML内のすべてのコンテンツを返すことを強く推奨します。私はJavascriptが、SEOの問題を除いて、巨大なページ1を除いてかなり合理的であろうと、現代のすべてのブラウザで十分に速いと思う。

オプション5 - サーバーでJavaScriptを使用してページを生成し、クライアントで同じコードを使用することもできます。これはおそらく最も複雑なアプローチであり、本当に良い理由がない限り、私はそれをお勧めしません。