Wie konvertiere ich HTML5 FormData in JSON?

HTML5 FormData in JSON konvertieren

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, um dies zu erreichen, aber die einfachste und effizienteste Methode besteht darin, die Funktion forEach() direkt auf dem FormData-Objekt zu verwenden.

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

Dieser Ansatz iteriert durch jedes Schlüssel-Wert-Paar in den 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. Multi -select-Listen, der folgende Code kann 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

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

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>

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

Update 4: JSON-Serialisierung komplexer Objekte

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

Das obige ist der detaillierte Inhalt vonWie konvertiere ich HTML5 FormData in JSON?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!