Webformular als JSON senden

Veröffentlicht am von

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:

<form id="myForm">
  <input type="hidden" name="toEmail" value="max.mustermann@empfaenger.de"/>
  <input type="hidden" name="isImportant" value="false"/>
  <label for="color">Absender-Email</label><br/>
  <input id="fromEmail" type="text" name="fromEmail" value="a@bc.de" />
  <br/>
  <label for="code">Betreff</label><br/>
  <input id="subject" type="text" name="subject" value="Betreff" />
  <br/>
  <textarea name="message" class="textarea" cols="25" rows="5"></textarea>
  <br>
  <input id="mySubmitButton" type="submit" value="submit" />
</form>

Das Script

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

$('#mySubmitButton').on('click', function() {
 
  $.ajax({
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: $('#myForm').serialize(),
    type: 'GET',
    url: 'receiver.php'
  }).done(function(data, textStatus, jqXHR) {
    console.log('Data sent.');
  }).fail(function(jqXHR, textStatus, errorThrown) {
    console.log('There was an error.');
  });
 
  return false;
 
});

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:

$('#mySubmitButton').on('click', function() {

$.get('receiver.php', $('#myForm').serialize())
.done(function() {
console.log('Data sent.');
})
.fail(function() {
console.log('There was an error.');
});

return false;

});

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:

$('#mySubmitButton').on('click', function() {
 
  var object = {};
  // Put form inputs into an array
  var array = $('#myForm').serializeArray();
  // Make an object out of the array
  $.each(array, function(index, item) {
    object[item.name] = item.value;
  });
 
  $.ajax({
    contentType: 'application/json; charset=UTF-8',
    dataType: 'json',
    data: JSON.stringify(object),
    type: 'POST',
    url: 'receiver.php'
  }).done(function(data, textStatus, jqXHR) {
    console.log('Data sent.');
  }).fail(function(jqXHR, textStatus, errorThrown) {
    console.log('There was an error.');
  });
 
  return false;
 
});

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.

Schreibe einen Kommentar