Ajaxリクエスト後に「div」を更新する

Question

これは、Django での最初のプロジェクトです。私は Django、ajax、JavaScript を初めて使用します。 ajaxリクエストを行った後、データをjinjaテンプレートに送信する必要があります。

私のindex.htmlは次のとおりです:

{% if data %}
  <p>{{data.title}}</p>
  <p>{{data.price}}</p>
{% endif %}

私の JavaScript は次のとおりです:

<script>
 $.ajax({
        タイプ:「POST」、
        url: "/", // 実際のビューの URL に置き換えます
        データ： {
            input_value: "テスト",
            csrfmiddlewaretoken: "{{ csrf_token }}"
        }、
        成功: 関数(応答) {
            title = response // リクエスト後のレスポンスは { "data" : {"title":"t1", "price":20} } となります
        }、
        エラー: function() {
            console.log("エラー")
        }
    });

<script>

それが可能かどうかはわかりません。 element.innerHTML を使って更新する人もいますが、私は jinja 形式で送信する必要があります。ありがとうございます

Answer 1

ここでは好みに応じて 2 つのオプションがあります。

1. JSON の代わりにテンプレートを返す ここでの考え方は、サーバー側でテンプレートを生成し、生成された HTML を AJAX 呼び出し元に返すことです。したがって、Ajax の成功は、この HTML フラグメントを正しい場所に追加するだけです。

2. JS で div をレンダリングする JSON 戦略しかない場合、または DRF を使用する場合、唯一の方法は、ループを使用して受信したアイテムをループし、同等の HTML を生成してドキュメントに追加することです。

JinJa を同じページに配置することはできません。レンダリングするページを生成するとき、まだデータを受け取っていないからです。