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à.

• Introduction aux vues générales basées sur les classes dans Django et exemples d'utilisation
• Collectez les vues de classe génériques de Django et mentionnez l'implémentation

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.

• Les utilisateurs accèdent à / greet avec un navigateur
• La valeur saisie dans le formulaire (nom) est envoyée par la méthode POST.
• • Le chemin de destination de la méthode POST est le même que l'affichage à l'écran / greet --Dans views.py, identifiez la requête Ajax (XMLHttpRequest) et séparez-la des autres traitements.
• Bonjour contre la requête Ajax, de [nom]! Afficher le message ʻa l'écran avec la balise

  `

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.

• Nom du projet: django_ajax, nom de l'application: salutation.

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>

<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>

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!')

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.

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)

...
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
...