Wie benutze ich die ajax Funktion, um ein Formular zu senden, ohne dass die Seite aktualisiert wird? Was fehlt mir? Muss ich Rest-Framework dafür verwenden?

Siehe das offizielle Dokument von submit () und serialize () und modifiziere deinen Ajax so:

Auf der Backend-Seite geben Sie HttpResponseRedirect() zurück, was Ihren Ajax-Aufruf an eine URL umleitet (Statuscode = 302). Ich werde vorschlagen, eine json Antwort zurückzugeben.

Fügen Sie für Django 1.7+ die Zeile from django.http import JsonResponse hinzu, um die json-Antwort zurückzugeben.

Für pre Django 1.7 verwende return HttpResponse(json.dumps(response_data), content_type="application/json")

Ändern Sie diesen Teil Ihrer views.py , um JSON-Antwort

Sie müssen nicht Rest-Framework verwenden. Aber wenn Sie Rest-Framework für diesen Zweck verwenden, wird es einfach zu implementieren sein.

Dies ist die allgemeine Struktur Ihrer Kommentar-App. Ich nehme an, dass Sie Django REST Framework

• Kommentarmodell (models.py)

  %Vor%

• Kommentarformular (forms.py)

  %Vor%

• Kommentarformularansicht und API-Ansicht (ansichten.py)

  %Vor%

• Schlussendlich clientseitiger Code AJAX / JQuery

  %Vor%

Nach Ihrem aktuellen Code Es sieht so aus, als würde es immer umgeleitet werden, da Sie nach der Validierung des Kommentarformulars und der Aktualisierung in die Datenbank HttpResponseRedirect zurückgeben, das für die Weiterleitung vorgesehen ist.

Ich denke, was Sie wollen, ist den Kommentar in die Datenbank zu aktualisieren und eine Erfolgsantwort zu erhalten.

Um dies zu erreichen, müssen Sie den Antworttyp ändern. Ich würde vorschlagen, zurückzugeben JsonResponse und basierend auf der JSON-Antwort können Sie auch den HTML-Code aktualisieren. Ich bin mir sicher, dass die Rückgabe von JSON nicht dazu führt, dass Sie Ihren HTML-Code umleiten.

Lass es mich wissen, wenn es dir klar ist.

Danke.

Das Wichtigste, was Sie tun müssen, um das erneute Laden der Seite beim Senden von Formularen zu verhindern, ist das Aufrufen von event.preventDefault() in Ihrem Formular submit -Ereignishandler. @Vibhu hat in der obigen Antwort ein sehr gutes Codebeispiel angegeben. Genau das müssen Sie auf der Client-Seite tun. (Ich gebe seinem Code einen einzigen Unterschied, die Anfrage wird an "comment / create-ajax" gesendet, nicht an "comment / create"

});

Auf der Server-Seite können Sie einen weiteren Controller (in Django-Termen angezeigt) zur Verfügung stellen, der POST /comments/create-ajax verarbeitet, er sollte folgendermaßen aussehen:

JsonResponse und model_to_dict

Viel Glück!

P.S. Beachten Sie, dass das eingehende Modell vor dem Speichern validiert werden muss

Beispielhaft möchte ich Ihnen zeigen, wie Sie dies mit Django REST Framework erreichen und wie viel Code Sie NICHT ändern müssen.

TL; DR

Die Installation von DRF unterbricht nichts. Fügen Sie einfach 8 Codezeilen hinzu (ohne Importe), ändern Sie 2 vorhandene Zeilen und entfernen Sie Ihre gesamte comment_create_view .

Für diejenigen, die an weiteren Details interessiert sind, lesen Sie bitte weiter.

1. Installieren Sie django-rest-framework mit diesem Handbuch.

2. Erstellen Sie eine serializers.py -Datei mit folgendem Inhalt

Hier definieren Sie die Klasse, die serialisiert wird (eine Comment -Modellinstanz in ein json -Objekt transformieren) und deserialisieren (umgekehrte Aktion der Umwandlung eines json -Objekts in eine Comment -Instanz) Ihre Kommentare.

3. Fügen Sie Ihrem views.py die folgende Ansicht hinzu:

Hinweis: Diese 4 Codezeilen ersetzen tatsächlich Ihre gesamte comment_create_view .

Hier definieren Sie eine generische Ansicht, die speziell für die Erstellung von Objekten entworfen wurde. CreateAPIView behandelt nur POST -Anfragen und verwendet die Klasse CommentSerializer , um Objekte zu konvertieren. Eine Serialisierungsklasse für Django-REST-Framework ist, was eine Formularklasse für Django ist - sie verarbeitet die Validierung von Daten und gibt eine Antwort in Form von json oder entsprechende Fehlermeldungen (auch in json) zurück, falls Ihre Daten nicht korrekt sind.

4. Fügen Sie Ihrer Hauptdatei urls.py

Hier registrieren Sie Ihre API-Ansicht als eine Route, an die Sie Anfragen senden können.

5. Bearbeiten Sie Ihre ajax -Anfrage

Sie haben POST an die neu erstellten API-Endpunktdaten in Form von json , und Ihr Serializer übernimmt sie und erstellt daraus eine Comment -Modell-Instanz, die in der Datenbank gespeichert wird. Wenn Sie beim Erstellen einer Instanz Comment (oder eines anderen Modells) ein bestimmtes Verhalten benötigen, können Sie die Methode .create() Ihrer CommentSerializer überschreiben. Weitere Informationen finden Sie im Django-REST-Framework-Lernprogramm .

6. Mach was du brauchst mit dem neu erstellten comment

Dieser Teil gilt auch für Nicht-Django-REST-Framework-Szenarien. Sobald Sie die comment erfolgreich erstellt haben, erhalten Sie diese in Ihrer success -Funktion in JSON-Form und abhängig davon, was Sie damit machen wollen, müssen Sie das gewünschte Verhalten in dieser success -Funktion definieren.

Grundsätzlich ist es das. Bitte beachten Sie, dass das hier beschriebene Beispiel ein minimal erforderlicher Code ist, damit es für Sie funktioniert. Ich habe die vorgefertigten Django-REST-Framework-Funktionen verwendet, aber natürlich gibt es viele weitere Möglichkeiten, die Dinge zum Laufen zu bringen. Möglicherweise müssen Sie einige Standardmethoden außer Kraft setzen, aber am Ende, weil DRF entwickelt wurde, um mit Ajax-Aufrufen umzugehen, wird Ihr Code kürzer und sauberer sein.

Viel Glück!

Dies ist das einfachste Beispiel für die Implementierung von Ajax-Formularen in Verbindung mit Django:

Sie können Ajax Post verwenden, um JSON an Django zu senden und dann die Argumente als dict() zu behandeln. Hier ist ein Beispiel:

Im Browser (JQuery / JavaScript):

In der Server-Engine (Python):

In Ihrem Javascript rufen Sie die Klasse .commentForAjax. Sie sollten die ID aufrufen:

Hoffe, das hilft. R

In Ihrem Formular-Tag unter

Sie müssen keine Aktion oder Methode definieren. Du handelst mit ihnen über Ajax. Also lösche sie und dein Formular versucht nicht, diese Aktion auszuführen. Und hoffentlich löst es dein Problem mit der Refresh-Seite. Ändere auch deine Einreichungszeile '.commentForAjax' in '#commentForAjax' , da es keine Klasse ist, sondern eine ID.

$ (Dokument) .on ('submit', '. commentForAjax', Funktion (e) {       e.preventDefault ();

// Setzen Sie

e.stopPropagation ();