Aktualisieren Sie „div“ nach einer Ajax-Anfrage

Question

Dies ist mein erstes Projekt in Django. Ich bin neu in Django, Ajax und Javascript. Ich muss Daten an die Jinja-Vorlage senden, nachdem ich eine Ajax-Anfrage gestellt habe.

Meine index.html lautet wie folgt:

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

Mein Javascript lautet wie folgt:

<script>
 $.ajax({
        Typ: „POST“,
        URL: „/“, // Durch die URL der tatsächlichen Ansicht ersetzen
        Daten: {
            input_value: „test“,
            csrfmiddlewaretoken: „{{ csrf_token }}“
        },
        Erfolg: Funktion(Antwort) {
            title = Antwort // Nach der Anfrage wird die Antwort zu { "data" : {"title": "t1", "price":20} }
        },
        Fehler: function() {
            console.log("Fehler")
        }
    });

<script>

Ich weiß nicht, ob das möglich ist. Einige Leute verwenden element.innerHTML zum Aktualisieren, aber ich muss es im Jinja-Format senden. Vielen Dank

Answer 1

您在这里有两个选择，这取决于您的偏好。

1. 返回一个模板而不是JSON 这里的想法是在服务器端生成模板，然后将生成的HTML返回给AJAX调用者。因此，Ajax成功只是将此HTML片段追加到正确的位置。

2. 在JS中渲染div 如果您只有JSON策略或使用DRF，则唯一的方法是使用循环遍历接收到的项目并生成等效的HTML，然后将其添加到文档中。

您无法将JinJa放在同一页上，因为在生成页面以渲染它时，您尚未接收到数据。