JQuery – Formulardaten absenden über AJAX

0
438

Formulare via AJAX an ein Backend senden

In unserem Beispiel ist es erstmal nicht relevant, welches Backend eingesetzt wird. Der AJAX Befehl wird per JSON an das Backend übertragen.

Code eines AJAX Request


$('#FORM_ID').on('submit', function(){

    let data = {
        "csrf_token" : csrf_token
        ,"action" :    "handle_form_event"
    };

    data = $(this).serialize() + "&" + $.param(data);

    $.ajax({
        type: 'post'
        ,dataType: 'json'
        ,url: 'https://destination_url.de'
        ,data: data
        ,error: function() { 
            alert("Es ist ein unbekannter Fehler aufgetreten"); 
        }
        ,success: function (ret_data) {

        }
    });

    return false;
});

 Erklärung zu den einzelnen Code-Zeilen

  • Zeile 1: Das AJAX soll auf das HTML Formular mit der ID „FORM_ID“ reagieren.
  • Zeile 3-6: Über dieses „Data-Paket“ erhalten wir die Möglichkeit, zusätzliche Variabeln an den Request zu hängen. In unserem Beispiel wird ein CSRF_TOKEN mitgesandt, hierzu mehr in unserem PHP Codeigniter Tutorial zum Verarbeiten von AJAX Requests, welches wir zu einem späteren Zeitpunkt hier verlinken werden
  • Zeile 8: Jetzt werden die Formulardaten in unser „Data-Paket“ gepackt und können vom Backend als normale Post-Variabeln verwendet werden
  • Zeile 10: Dies ist der eigentlich AJAX Request an das Backend:
    • Zeile 11: Als Optionen stehen GET und POST zur Verfügung. POST hat den Vorteil, das mehr Daten übermittelt werden können
    • Zeile 12: In unserem Beispiel verwenden wir JSON. Weitere Formate können sein: Text, XML, HTML etc. Genaue Dokumenation findet man hier: AJAX Dokumentation Vorsicht: Wenn als DataType beispielsweise JSON eingestellt ist, müssen die Daten vom Backend im JSON Format zurück kommen. Ansonsten geht der Response in den Error-Zweig
    • Zeile 13: Die URL, welches den AJAX Befehl entgegen nimmt
    • Zeile 14: Unser „Data-Paket“, welches per POST an das Backend übermittelt wird
    • Zeile 15-17: Der Error-Zweig. Wir verwenden in diesem Beispiel eine anonyme Funktion. Hier kann natürlich auch eine andere Funktion ausgeführt bzw. angesprochen werden. Vorsicht: Es sollte niemals direkter Code hier stehen, wie beispielsweise: alert(„Es ist ein Fehler aufgetreten“). Es besteht dann die Gefahr, dass zum Success-Zweig zusätzlich der Error-Zweig ausgeführt wird. Weitere Gründe für die Ausführung des Error-Zweigs sind u. a.:
      • Die zurück gelieferten Werte nicht dem DataType (bei uns JSON) entsprechen
      • Das Backend nicht erreichbar ist
    • Zeile 18-20: Der Success-Zweig. Wurden die Daten im korrekten Format vom Backend zurück geliefert, befinden sich die Daten im „ret_data“ Paket. Dies kann in der anonymen Funktion ganz normal angesprochen werden.
    • Zeile 23: Um Event-Bubbling vorzubeugen, geben wir return false zurück. Event-Bubbling wäre in unserem Beispiel, dass das normale HTML Formular Event im Anschluss ausgeführt wird. Dies wollen wir verhindern, da wir die HTML Formulardaten komplett über unseren AJAX Request bearbeiten. Weitere Möglichkeiten dies zu verhindern wäre „event.stopPropagation“.

Habt ihr Fragen zu diesem Artikel oder Verbesserungsvorschläge / Anmerkungen. Teilt es uns doch bitte über die Kommentarfunktion mit.