Home > JavaScript > Formular per AJAX-Request (jQuery) abschicken

Formular per AJAX-Request (jQuery) abschicken

Das Abschicken von Formulardaten erfolgt in der Regel durch Drücken des Submitbuttons. Der Nutzer wird dann auf die jeweilige Seite weitergeleitet, die im HTML-Tag form als Attribut action angegeben ist. Bei dynamischen Webseiten kommt es oft vor, dass eine Berechnung von bestimmten Formulardaten und eine anschließende Aufbereitung und Anzeige der Ergebnisse benötigt wird.

Ein Beispiel dafür ist die Berechnung des Gesamtpreises einer Bestellung, der sich unter anderem aus Produktpreis und Artikelanzahl, Versandkosten, eventuell vorhanderen Staffelungen, Rabatten, Gutscheinen und vielen weiteren Dingen zusammensetzen kann.

Wenn die relevanten Parameter zum größten Teil in der Datenbank liegen, macht es aus diesem Grund durchaus Sinn die Kalkulation serverseitig durchzuführen, statt es durch ein Javascript erledigen zu lassen.

In diesen Fällen eignet sich ein AJAX-Request per POST. Die Daten aus dem Formular werden an ein PHP-Script geschickt. Dieses Script verarbeitet und berechnet den Gesamtpreis. Als Ergebnis kann dann ein fertiger HTML-Code zurückgegeben und an die passende Stelle platziert werden. Eine andere Möglichkeit ist, dass man das Ergebnis zum Beispiel im Format JSON liefert und dieses clientseitig für die Darstellung im Browser durch ein Javascript entsprechend aufbereiten lässt.

Ich selbst bevorzuge die serverseitige Methode, da man hier eher schneller an die relevanten Parameter aus der Datenbank herankommen wird, die zur Berechnung erforderlich sind. Wenn zum Beispiel ein Gutscheincode eingegeben wurde, muss dieser vorab auf Gültigkeit überprüft werden. Zudem ist es von Vorteil in der Preisübersicht den Gutschein mit Preis aufzulisten. Diesen Preis wird der Nutzer sicherlich nicht selbst eingeben wollen, sondern erwartet, dass das System den korrekten Preis für seinen eingegebenen Code findet. Nun aber zurück zum eigentlich Thema.

Bei recht simplen Berechnungen kann man auf AJAX-Requests wiederum ganz verzichten – wozu auch, wenn fast nur eine Aufbereitung bzw. Anzeige und keine komplexen mathematischen Formeln erforderlich sind.

Ein AJAX-Request stellen wir folgendermaßen mit jQuery zusammen:

Wie oberhalb zu sehen, haben wir also eine function calculate(), welche wir bei den benötigten Events (keypress, change, click, …) aufrufen können.

Die Funktion serialize() erstellt für uns einen Textstring im URL-kodierten Format. Das Ergenis der Berechnung wird in der Variable r gespeichert, dessen Content wir mit append() an in das Element mit der ID calculation einfügen.

Selbstverständlich kann so eine Anfrage statt POST-Request auch mittels HTTP GET-Request erfolgen. Wie immer kann bei Fragen, Verbesserungen und sonstigen Anregungen gerne die Funktion zum Kommentieren genutzt werden.

  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks