Wie konvertiere ich HTML5 FormData in JSON für die Client-Server-Kommunikation?

Konvertieren von HTML5 FormData in JSON

Das Konvertieren von HTML5 FormData-Objekten in JSON ermöglicht die Serialisierung von Formulardaten in ein maschinenlesbares Format. Dies ist nützlich für die Übertragung von Daten zwischen Client und Server.

Methode unter Verwendung eines benutzerdefinierten Objekts und JSON.stringify

Zum Konvertieren von FormData-Einträgen in JSON ohne jQuery oder Serialisierung gesamtes Objekt:

<code class="javascript">var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);</code>

Update 1: ES6-Pfeilfunktionen

Verwendung von ES6-Pfeilfunktionen:

<code class="javascript">var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);</code>

Update 2: Unterstützung für mehrwertige Elemente

Für Mehrfachauswahllisten oder andere Formularelemente mit mehreren Werten:

<code class="javascript">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);</code>

Update 3: Direkte Übertragung von FormData

Zum Senden von FormData an einen Server über XMLHttpRequest:

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

Oder mit der Fetch-API:

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

Update 4: Benutzerdefinierte toJSON-Methode für Complex Objekte

Für benutzerdefinierte Objekte definieren Sie eine toJSON-Methode, um deren Inhalt zu serialisieren. Weitere Informationen zu den Einschränkungen von JSON.stringify finden Sie in der MDN-Dokumentation.

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