Ajax dans Django (en utilisant la vue de classe générique)

La recherche de "Django Ajax" touche certains articles, mais la plupart d'entre eux étaient basés sur des vues basées sur des fonctions, j'ai donc expliqué le code en utilisant la vue à usage général.

Vue à usage général Si vous ne le connaissez pas, commençons par là.

C'est mon opinion personnelle, mais je pense que l'un des grands avantages de l'adoption de Django est l'utilisation de vues génériques basées sur les classes. ~~ ** Je pense que c'est probablement la meilleure pratique **. ~~

Image du produit fini

GitHub- skokado / django_ajax: exemple Django + Ajax

La chaîne de caractères d'entrée s'affiche à l'écran.

Décidez facilement des spécifications.

1.gif

Commentaire de code

Les composants sont largement en dessous.

--ʻUrls.py: Routage (liaison d'URL) --forms.py: définir des formulaires permettant aux utilisateurs de saisir des données --views.py: Décrivez le traitement de la demande. --Utiliser la vue générique FormView --UtilisezRequest.is_ajax () pour identifier les requêtes Ajax --Template (ʻindex.html): HTML à afficher. Cet article inclut également jQuery.

Préparation

Créez correctement un projet Django et une application Django.

Décrivez la règle de routage dans ʻurls.py`.

urls.py

Le seul chemin à utiliser est / greet.

django_ajax/urls.py


from django.urls import path

from . import views


urlpatterns = [
    path('greet/', views.GreetView.as_view(), name='greet'),
]

forms.py

Tapez simplement nom

greeting/forms.py


from django import forms


class GreetForm(forms.Form):
    name = forms.CharField(label='Quel est ton nom?')

index.html

--Font partie

<Div id =" result "> `Bonjour élément subordonné de, [nom]! Le mot «est ajouté. (Ce processus est décrit dans jQuery)

<h1>Let's Greeting!</h1>
<form action="" method="post">{% csrf_token %}
    {{ form }}
    <button type="submit">Envoyer</button>
</form>

<div id="result">
    <!--Voici la salutation<p>Des éléments de balise sont ajoutés-->
</div>

--Partie de script

Je pense que l'on peut lire que la partie jQuery est également conforme aux spécifications ci-dessus. De plus, j'ai besoin de jQuery (pas mince), alors chargez-le.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
//Définissez un écouteur d'événements pour le bouton d'envoi. Décrire le traitement Ajax à l'intérieur
$("form").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
      url: form.prop("action"),
      method: form.prop("method"),
      data: form.serialize(),
      timeout: 10000,
      dataType: "text",
    })
    .done(function(data) {
        $("#result").append("<p>" + data + "</p>");
    })
});
</script>

<détails>

ʻindex.html` </ summary>

<h1>Let's Greeting!</h1>
<form action="" method="post">{% csrf_token %}
    {{ form }}
    <button type="submit">Envoyer</button>
</form>

<div id="result">
    <!-- Will be replaced with inputed text by Ajax -->
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
//Définissez un écouteur d'événements pour le bouton d'envoi. Décrire le traitement Ajax à l'intérieur
$("form").submit(function(event) {
    event.preventDefault();
    var form = $(this);
    $.ajax({
      url: form.prop("action"),
      method: form.prop("method"),
      data: form.serialize(),
      timeout: 10000,
      dataType: "text",
    })
    .done(function(data) {
        $("#result").append("<p>" + data + "</p>");
    })
});
</script>

views.py

Définissez un GreetView qui hérite de FormView

greeting/views.py


from django.http import HttpResponse
from django.views.generic import FormView

from . import forms

# Create your views here.
class GreetView(FormView):
    template_name = 'index.html'  #Nom du modèle(nom de fichier html)
    form_class = forms.GreetForm
    success_url = '/greet'

    def post(self, request, *args, **kwargs):
        form = self.get_form(self.form_class)
        if form.is_valid():
            if request.is_ajax():
                """Séparer le traitement Ajax dans une autre méthode"""
                print('### Ajax request')
                return self.ajax_response(form)
            #Gestion des méthodes POST autres que Ajax
            return super().form_valid(form)
        #Que faire si les données du formulaire sont incorrectes
        return super().form_invalid(form)

    def ajax_response(self, form):
        """Une méthode qui renvoie une réponse à jQuery"""
        name = form.cleaned_data.get('name')
        return HttpResponse(f'Bonjour,{name}San!')

Au fait

Pour ʻif request.is_ajax (): dans views.py`, la documentation officielle dit:

référence- Objets de requête et de réponse|Documentation Django| Django

(Traduction en japonais Hannari)

HttpRequest.is_ajax()

HTTP_X_REQUESTED_AVEC en-tête'XMLHttpRequest'Dans une chaîne
Vérifie si la demande est via XMLHttpRequest et renvoie True.
De nombreuses bibliothèques JavaScript modernes envoient cet en-tête.

Autrement dit, cette méthode ne peut être utilisée que si «XMLHttpRequest» est défini dans «HTTP_X_REQUESTED_WITH» dans l'en-tête de la requête. jQuery semble définir cela correctement. ** J'ai essayé un peu sans utiliser jQuery (JavaScript brut), mais cela n'a pas fonctionné **.

  • code de vérification

Réécrivez GreetView dans views.py comme suit et regardez l'en-tête de la demande.

class GreetView(FormView):
    template_name = 'greet.html'
    form_class = forms.GreetForm
    success_url = '/greet'

    def post(self, request, *args, **kwargs):
        #★ Ajout
        for k, v in request.META.items():
            print(k, v)
        # ...(La même chose s'applique ci-dessous)

--Résultat

  • Extrait car une grande quantité d'en-têtes de requête est tous sortie en mode débogage
...
HTTP_ACCEPT text/plain, */*; q=0.01
HTTP_X_REQUESTED_WITH XMLHttpRequest  # <=cette
HTTP_USER_AGENT Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
...

Résumé

Ce qui précède est un exemple d'Ajax de Django utilisant une vue à usage général. Je pense que c'est plus concis que les autres articles. En outre, je voudrais essayer ce qui peut être fait en combinaison avec StreamingHttpResponse

Recommended Posts

Ajax dans Django (en utilisant la vue de classe générique)
Comment utiliser le bootstrap dans la vue de classe générique Django
Comment télécharger des fichiers dans la vue de classe générique Django
Comment identifier de manière unique la source d'accès dans la vue de classe générique Django
Remarque DJango: depuis le début (en utilisant une vue générique)
Prise en main et utilisation d'exemples de vues génériques basées sur des classes dans Django
Créez une application CRUD simple en utilisant la vue de classe générique de Django
Déployez Django en 3 minutes à l'aide de docker-compose
Implémentation du bouton like dans Django + Ajax
Mémo d'enregistrement d'informations en utilisant la session dans Django
Environnement CSS créé en 10 minutes avec Django
Vue basée sur les fonctions Django
Afficher les avis sur les médicaments à l'aide de listes en Python
Résumé du didacticiel Django pour les débutants par les débutants ④ (Vue générique)
Vue basée sur les classes Django
Spécifiez l'URL de la vue dans le modèle Django
Essayez d'utiliser une classe orientée objet dans R (méthode R6)
Formulaire à Django
classe de cas en python
Écrire un décorateur en classe
Afficher les images avec Matplotlib
Modifications du modèle dans Django
Modèle de configuration de Django2 View
Essayez d'utiliser Django templates.html
Notation de classe en Python
[Django 2.2] Comment affichez-vous la destination de la relation dans Django? [Affichage de liste]
Créez une application de gestion de partition shogi à l'aide de Django 4 ~ Créer une vue ~
Comment générer une requête à l'aide de l'opérateur IN dans Django
Créez un modèle de suivi facile à utiliser avec Django en utilisant ManyToManyField via