Mettre à jour 'div' après la requête ajax

Question

C'est mon premier projet dans Django. Je suis nouveau sur Django, ajax et javascript. Je dois envoyer des données au modèle jinja après avoir fait une requête ajax.

Mon index.html est le suivant :

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

Mon javascript est le suivant :

<script>
 $.ajax({
        tapez : "POST",
        url : "/", // Remplacer par l'URL de la vue actuelle
        données: {
            valeur_entrée : "test",
            csrfmiddlewaretoken : "{{ csrf_token }}"
        },
        succès : fonction (réponse) {
            title = réponse // Après la requête, la réponse deviendra { "data" : {"title":"t1", "price":20} }
        },
        erreur : fonction() {
            console.log("Erreur")
        }
    });

<script>

Je ne sais pas si c'est possible. Certaines personnes utilisent element.innerHTML pour mettre à jour, mais je dois l'envoyer au format jinja. Merci

Answer 1

Vous avez deux options ici, selon vos préférences.

1. Renvoyer un modèle au lieu de JSON L'idée ici est de générer le modèle côté serveur, puis de renvoyer le code HTML généré à l'appelant AJAX. Le succès d'Ajax consiste donc simplement à ajouter ce fragment HTML au bon emplacement.

2. Rendu div en JS Si vous disposez uniquement d'une stratégie JSON ou utilisez DRF, le seul moyen est d'utiliser une boucle pour parcourir les éléments reçus et générer le code HTML équivalent, puis de l'ajouter au document.

Vous ne pouvez pas mettre JinJa sur la même page car lorsque vous générez la page pour la restituer, vous n'avez pas encore reçu les données.