Integration von Ajax mit Django in Python

Dieser Artikel soll demonstrieren, was Ajax ist, Ajax mit Django integrieren, die get- und post-Anforderungen von Ajax von einem Browser senden und die Daten auf der Django-Site in Python verarbeiten.

Integrieren Sie Ajax mit Django in Python

Ajax steht für asynchrones JavaScript und XML, aber was bedeutet das? Ajax ist lediglich eine Webentwicklungstechnik, die verwendet wird, um Daten im Hintergrund zu senden und abzurufen, ohne eine Webseite zu aktualisieren.

Ein reales Ajax-Beispiel ist, wenn wir zu Twitter gehen und unseren Feed öffnen.

Nach einiger Zeit sehen Sie oben auf Ihrem Bildschirm eine Menüleiste, die anzeigt, dass neue Tweets verfügbar sind, und wenn Sie noch länger warten, werden Sie sehen, dass die Zahl zunimmt, da immer mehr Personen, denen Sie folgen, etwas auf Twitter posten.

Wir müssen beachten, dass unsere Seite nie vollständig aktualisiert wird. Jetzt haben wir eine Vorstellung von Ajax, also sehen wir uns an, wie man es mit dem Django-Framework verwendet.

Wir haben ein einfaches Projekt erstellt, um zu demonstrieren, wie man mit Ajax arbeitet, aber es ist unmöglich, zu demonstrieren, wie man mit unserem gesamten Projekt arbeitet. Wenn Sie mit Django vertraut sind, wissen Sie bereits, wie man ein Django-Projekt erstellt, daher haben wir ein Modell namens Kontakt mit einigen Feldern und einem einfachen Modell für das Kontaktmodellformular.

Wenn wir das Formular absenden, werden die Daten in der Datenbank gespeichert, auf dieselbe Seite selbst umgeleitet und die entsprechenden URLs festgelegt.

Wir verwenden jQuery, um Ajax auszulösen, und CDN ist ebenfalls erforderlich. Die Logik, die wir im Formular anwenden, wenn wir das Formular senden, ist also, dass der Server antwortet, wenn das Formular gültig ist.

Wir verwenden normales JavaScript, um die Objekte des Formulars abzurufen, also brauchen wir ein submit-Ereignis, und wenn dieses Ereignis ausgelöst wird, ruft es eine submithandler-Funktion auf.

Wir erstellen eine submithandler-Funktion, die das Ereignis standardmäßig empfängt, und wir werden die Standardaktion der Formularübermittlung verhindern, was bedeutet, dass das Formular nicht übermittelt wird. Um also eine Ajax-Anfrage zu stellen, schreiben wir eine jQuery in unsere HTML-Datei.

Wir werden einige Attribute im Ajax-Objekt spezifizieren; Der erste ist type, was eine Art Anfrage ist.

Wir können zwei Arten von Anfragen weitergeben; get oder post, also müssen wir post übergeben. Das nächste Attribut ist die url, was bedeutet, welche URL wir auf die post-Anfrage treffen wollen.

Wir werden hier also den Django-Vorlagenindex verwenden; Wir werden die URL unserer Kontakt-Seite weitergeben. Das contact ist der Name der URL, die wir später in die url.py schreiben werden.

Das nächste ist nun data, was bedeutet, dass die Formulardaten auf der Serverseite sein sollen, um Formulardaten auf dem Server zu verarbeiten. Daher müssen wir diese Daten in der Ajax-Anforderung mit der Formular-ID senden.

Der nächste ist der dataType, der Datentyp, den wir vom Server zurückerwarten. Wenn wir also eine HTTP-Antwort in den Ansichten senden und das Formular gültig ist oder einige JSON-Daten senden, müssen wir Daten in JSON übergeben Format, also übergeben wir es im JSON-Typ.

Wir haben das Attribut success für das letzte übergeben, das eine Funktion namens successFunction akzeptiert. Diese Funktion öffnet ein Popup-Warnfenster, wenn die Anfrage erfolgreich ist.

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>

<script>
    const form = document.getElementById('form');
    form.addEventListener("submit", submitHandler);

    function submitHandler(e) {
        e.preventDefault();
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : '{% url 'contact' %}', // the url where we want to POST
            data        : $('#form').serialize(), // our form data
            dataType    : 'json', // what type of data do we expect back from the server
            success     : successFunction
        });
    }

    function successFunction(msg) {
        if (msg.message === 'success') {
            alert('Success!');
            form.reset()
        }
    }
</script>

Jetzt müssen wir die URL mit dem Namen contact setzen und eine contact-Methode aus der views.py-Datei aufrufen, was bedeutet, wenn der Benutzer auf diese URL trifft, wird die contact-Methode aufgerufen.

urlpatterns = [
    path("", views.contact, name="contact"),
]

Jetzt könnten wir etwas in der Datei views.py tun, damit wir wissen, dass die Funktion contact immer dann, wenn wir das Formular absenden, die entsprechende Funktion aufruft und diese abfängt, und sie erhält eine Ajax-Anfrage und überprüft, ob die Ajax Anfrage ist gültig oder nicht mit der Methode .is_ajax().

from django.http import JsonResponse
from django.shortcuts import render, redirect
from .forms import ContactModelForm


def contact(request):
    form = ContactModelForm()

    if request.is_ajax():
        form = ContactModelForm(request.POST)
        print(request.POST)
        if form.is_valid():
            form.save()
            return JsonResponse({"message": "success"})
    return render(request, "contact.html", {"form": form})

Klicken Sie hier, um die offizielle Dokumentation zur Integration von Ajax mit Django zu lesen.