[PYTHON] Ajax in Django (mit generischer Klassenansicht)

Die Suche nach "Django Ajax" trifft auf einige Artikel, aber die meisten basierten auf funktionsbasierten Ansichten, daher erklärte ich den Code anhand der Allzweckansicht.

Allzweckansicht Wenn Sie nicht damit vertraut sind, beginnen wir dort.

• Einführung in klassenbasierte Allzweckansichten in Django und Beispielverwendung
• Sammeln Sie die allgemeinen Klassenansichten von Django und erwähnen Sie die Implementierung

Dies ist meine persönliche Meinung, aber ich denke, einer der großen Vorteile der Einführung von Django ist die Verwendung klassenbasierter generischer Ansichten. ~~ ** Ich denke, das ist wahrscheinlich die beste Vorgehensweise **. ~~

Fertiges Produktbild

GitHub- skokado / django_ajax: Django + Ajax-Beispiel

Die eingegebene Zeichenfolge wird auf dem Bildschirm angezeigt.

Entscheiden Sie die Spezifikationen einfach.

• Benutzer greifen mit einem Browser auf / greet zu
• Der im Formular eingegebene Wert (name) wird von der POST-Methode gesendet.
• • Der Zielpfad der POST-Methode entspricht der Bildschirmanzeige / greet
• Identifizieren Sie in views.py die Ajax-Anforderung (XMLHttpRequest) und trennen Sie sie von anderen Verarbeitungen.
• "Hallo gegen Ajax-Anfrage, [Name]!" Zeigen Sie die Meldung "auf dem Bildschirm" mit dem Tag "

  " an

Codekommentar

Die Komponenten sind weitgehend unten.

--urls.py: Routing (URL-Bindung) --forms.py: Definieren Sie Formulare, in die Benutzer Daten eingeben können --views.py: Beschreiben der Anforderungsverarbeitung. --Verwenden Sie die generische Ansicht "FormView" --Verwenden Sie "Request.is_ajax ()", um Ajax-Anforderungen zu identifizieren --Template (index.html): HTML zum Anzeigen. Dieser Artikel enthält auch jQuery.

Vorbereitung

Erstellen Sie ein Django-Projekt und eine Django-Anwendung ordnungsgemäß.

• Projektname: django_ajax, Anwendungsname: greeting.

Beschreiben Sie die Routing-Regel in "urls.py".

urls.py

Der einzige zu verwendende Pfad ist / greet.

django_ajax/urls.py

from django.urls import path

from . import views


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

forms.py

Geben Sie einfach "Name" ein

greeting/forms.py

from django import forms


class GreetForm(forms.Form):
    name = forms.CharField(label='Wie heißen Sie?')

index.html

• Formteil

<Div id =" result "> Hallo untergeordnetes Element von, [name] 's! Das Wort wird hinzugefügt. (Dieser Prozess wird in jQuery beschrieben.)

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

<div id="result">
    <!--Hier ist die Begrüßung<p>Tag-Elemente werden hinzugefügt-->
</div>

--Script Teil

Ich denke, es kann gelesen werden, dass der jQuery-Teil auch den obigen Spezifikationen entspricht. Außerdem brauche ich jQuery (nicht schlank), also lade es.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
//Legen Sie einen Ereignis-Listener für die Senden-Schaltfläche fest. Beschreiben der Ajax-Verarbeitung im Inneren
$("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>

<h1>Let's Greeting!</h1>
<form action="" method="post">{% csrf_token %}
    {{ form }}
    <button type="submit">Senden</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>
//Legen Sie einen Ereignis-Listener für die Senden-Schaltfläche fest. Beschreiben der Ajax-Verarbeitung im Inneren
$("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

Definieren Sie eine "GreetView", die von "FormView" erbt

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'  #Vorlagenname(HTML-Dateiname)
    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():
                """Trennen Sie die Ajax-Verarbeitung in eine andere Methode"""
                print('### Ajax request')
                return self.ajax_response(form)
            #Behandlung anderer POST-Methoden als Ajax
            return super().form_valid(form)
        #Was tun, wenn die Formulardaten falsch sind?
        return super().form_invalid(form)

    def ajax_response(self, form):
        """Eine Methode, die eine Antwort an jQuery zurückgibt"""
        name = form.cleaned_data.get('name')
        return HttpResponse(f'Hallo,{name}San!')

Apropos

In Bezug auf "if request.is_ajax ():" in "views.py" lautet das offizielle Dokument wie folgt.

Referenz- Anforderungs- und Antwortobjekte|Django-Dokumentation| Django

(Hannari japanische Übersetzung)

HttpRequest.is_ajax()

HTTP_X_REQUESTED_MIT Header'XMLHttpRequest'In einer Zeichenfolge
Überprüft, ob die Anforderung über XMLHttpRequest erfolgt, und gibt True zurück.
Viele moderne JavaScript-Bibliotheken senden diesen Header.

Das heißt, diese Methode kann nur verwendet werden, wenn "XMLHttpRequest" in "HTTP_X_REQUESTED_WITH" im Anforderungsheader festgelegt ist. jQuery scheint dies richtig einzustellen. ** Ich habe ein wenig versucht, ohne jQuery (einfaches JavaScript) zu verwenden, aber es hat nicht funktioniert **.

• Verifizierungs-Schlüssel

Schreiben Sie GreetView in views.py wie folgt um und sehen Sie sich den Anforderungsheader an.

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

    def post(self, request, *args, **kwargs):
        #★ Ergänzung
        for k, v in request.META.items():
            print(k, v)
        # ...(Gleiches gilt weiter unten)

--Ergebnis

• Auszug, da eine große Anzahl von Anforderungsheadern alle im Debug-Modus ausgegeben werden

...
HTTP_ACCEPT text/plain, */*; q=0.01
HTTP_X_REQUESTED_WITH XMLHttpRequest  # <=Dies
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
...

Zusammenfassung

Das Obige ist ein Beispiel für Djangos Ajax in einer Allzweckansicht. Ich denke, es ist prägnanter als die anderen Artikel. Außerdem möchte ich versuchen, was in Kombination mit StreamingHttpResponse getan werden kann