Webformular als JSON senden

Im letzten Blog-Beitrag wurde vorgestellt, wie eine Microsoft Azure Function erstellt wird, die zum Senden von Emails genutzt werden kann. Die Function erwartet dabei einen HTTP-PUT-Aufruf mit angehängten Daten im JSON-Format. Wie Sie aus einem normalen HTML-Formular mit einigen Zeilen JavaScript und Jquery einen solchen JSON-Aufruf erzeugen, erfahren Sie in diesem Beitrag.

Das Formular

Zunächst benötigen wir ein einfaches Web-Formular:

Das Script

Anschließend werden die Daten über JavaScript aufbereitet und versendet:

Die Funktion serialize sorgt dafür, dass alle Formularfelder (die über ein name-Attribut verfügen) in einer Zeichenkette zusammengefasst werden.

Kurzschreibweise: $.get

Anstatt des Aufrufs von $.ajax kann auch folgende Kurzschreibweise verwendet werden:

Daten in JSON übermitteln

Möchte man Daten im JSON-Format übertragen, so ist der Einsatz von serialize nicht ausreichend, da bei diesem Funktionsaufruf nur eine Parameter-Zeichenkette entsteht und keine Objekt-Notation. Die Formulareingaben müssen daher vorher in ein JavaScript-Objekt umgewandelt werden:

Mit der jQuery-Funktion serializeArray wird zuerst ein Feld aus den Formulareingaben erzeugt. Anschließend wird aus diesem Feld ein JavaScript-Objekt gebildet, welches dann mit der vom Browser zur Verfügung gestellten Funktion JSON.stringify in JSON umgewandelt wird. Für den Versand wurde außerdem der dataType und der contentType des $.ajax-Aufrufs geändert. Weil die JSON viele Sonderzeichen enthält empfiehlt es sich die Methode zum Senden von GET auf POST umzustellen.

Um das Script mit der Azure-Functions-App zu verwenden, wird nur hinter url der entsprechende Funktionsaufruf (aus der Azure-App, mit Authentification-Code) eingefügt.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.