JSON応答にHTMLマークアップを含める必要がありますか？

eコマースサイトで、カートにアイテムを追加するときに、選択可能なオプションを含むポップアップウィンドウを表示したいと思います。iPod Shuffleを注文していて、彫刻する色とテキストを選択する必要があるとします。

ウィンドウをモーダルにしたいので、Ajax呼び出しで生成されたライトボックスを使用しています。現在、2つのオプションがあります。

オプション1：データのみを送信し、JavaScriptを使用してHTMLマークアップを生成する

これの良い点は、Ajaxリクエストを最小限に抑えて、データをマークアップと混合しないことです。

この点でそれほど優れていないのは、サーバー側のテンプレートエンジンを使用する代わりに、JavaScriptを使用してレンダリングを行う必要があることです。クライアント側のテンプレートソリューションを使用して、アプローチを少しクリーンアップできる場合があります。

オプション2：HTMLマークアップを送信する

これの良い点は、残りのレンダリングタスク（Django）で使用しているのと同じサーバー側テンプレートエンジンを使用して、ライトボックスのレンダリングを実行できることです。JavaScriptは、HTMLフラグメントをページに挿入するためにのみ使用されます。そのため、レンダリングは明らかにレンダリングエンジンに委ねられます。私には理にかなっています。

しかし、何らかの理由で、Ajax呼び出しでデータとマークアップを混合することに不安を感じています。何が私を不安にさせているのか分かりません。つまり、すべてのWebページが提供されるのと同じ方法で、データとマークアップが正しいのですか？

JSONにはデータのみが含まれ、マークアップは含まれません。長期的には、サイトの他の部分でJSONデータを使用する可能性があるため、このアプローチはより拡張可能です。マークアップを含めると、同じデータを使用して別のテンプレートを作成するのがはるかに難しくなります。

リクエストでデータを送信し、jsでマークアップを作成します。もう1つの利点は、帯域幅の使用量が少なくなることです。それは一種の個人的な好みですが、クライアント側のマークアップをサーバー側から遠ざけることはおそらく良い考えです。私はDjangoウェブサイトも持っています。私は、テンプレートシステムを使用して、ページにjson変数を配置し（作成するajax要件が1つ少ない）、マシンで開発するときにsrcファイルを使用します。すべてのクライアント側はExtJSで行われます。

あなたは両方の長所と短所について話したと思います。ライトボックスのJavaScriptをジャンゴビューから生成する3番目のオプションを見てみませんか。次に、JSONにデータを含めるだけで、ビューごとに更新しますか？

できることは、すべてのテンプレートコードをjavascript変数にラップし、クライアント側でJSONリクエストを受け取った後にjavascriptで出力することです。

マークアップにテンプレートエンジンを使用し、値を格納するための非表示フィールドをどこかに保持する必要があります。このフィールドは、セレクターを使用してドキュメント内で検索できます。