Konvertieren von HTML5 FormData in JSON

Das Konvertieren der Einträge eines HTML5 FormData-Objekts in JSON ist eine häufige Aufgabe in der Webentwicklung. Zwar gibt es verschiedene Ansätze, dies zu erreichen, aber die einfachste und effizienteste Methode besteht darin, die Funktion forEach() direkt für das FormData-Objekt zu verwenden.

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

Dieser Ansatz durchläuft jedes Schlüssel-Wert-Paar im FormData-Objekt und fügt sie einem neuen JavaScript-Objekt hinzu. Anschließend wird die Methode JSON.stringify() verwendet, um das Objekt in einen JSON-String zu konvertieren.

Update: ES6-Pfeilfunktionen

Für diejenigen, die die ES6-Syntax bevorzugen, ist die Dieselbe Lösung kann mit Pfeilfunktionen geschrieben werden:

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

Update 2: Unterstützung für Formularelemente mit mehreren Werten

Zur Unterstützung von Formularelementen mit mehreren Werten, z. B. Mehrfachauswahl Listen kann der folgende Code verwendet werden:

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

Update 3: Direkte Übermittlung über XMLHttpRequest und Fetch API

Das direkte Senden von FormData an einen Server ohne Konvertierung ist mit dem möglich XMLHttpRequest-Objekt oder Fetch-API:

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});

Update 4: JSON-Serialisierung komplexer Objekte

Benutzerdefinierte Serialisierungslogik kann für komplexe Objekte über die toJSON()-Methode definiert werden.