Wie konvertiere ich HTML5 FormData ohne Serialisierung in JSON?

HTML5-Formulardaten in JSON ohne Serialisierung konvertieren

Bei der Arbeit mit HTML5-Formularen kann es erforderlich sein, die Daten des Formulars in JSON zu konvertieren. Ein gängiger Ansatz besteht darin, das FormData-Objekt zu serialisieren; Dies ist jedoch möglicherweise nicht in allen Fällen wünschenswert. So können Sie FormData-Einträge ohne Serialisierung in JSON konvertieren:

Schritt 1: Iterieren Sie über das FormData-Objekt

Verwenden Sie die Methode forEach(), um über die FormData-Objekte zu iterieren Einträge. Jeder Eintrag enthält einen Schlüssel (Feldname) und einen Wert (Eingabewert).

Schritt 2: Erstellen Sie ein einfaches Objekt

Initialisieren Sie ein leeres Objekt, um die Konvertierung zu speichern JSON-Daten.

Schritt 3: Einträge in Schlüssel-Wert-Paare konvertieren

Weisen Sie im forEach()-Rückruf die Werte basierend auf ihren Schlüsseln dem Objekt zu. Zum Beispiel:

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

Schritt 4: Objekt in JSON konvertieren

Verwenden Sie abschließend die Methode JSON.stringify(), um das Objekt in einen JSON-String zu konvertieren.

<code class="javascript">var json = JSON.stringify(object);</code>

Verwenden von ES6-Pfeilfunktionen

Sie können die forEach()-Schleife mithilfe von ES6-Pfeilfunktionen vereinfachen:

<code class="javascript">formData.forEach((value, key) => object[key] = value);</code>

Unterstützung mehrerer Werte

Wenn Ihr Formular Felder mit mehreren Werten enthält, z. B. Mehrfachauswahllisten, können Sie den obigen Code ändern, um diese zu unterstützen:

<code class="javascript">formData.forEach((value, key) => {
    if (!Array.isArray(object[key])) {
        object[key] = [object[key]];
    }
    object[key].push(value);
});</code>

FormData direkt senden

Wenn Sie die Formulardaten über eine XMLHttpRequest senden möchten, können Sie das FormData-Objekt direkt senden, ohne es in JSON zu konvertieren. Dieser Ansatz wird auch von der Fetch-API unterstützt.

Umgang mit komplexen Objekten

Beachten Sie, dass die Methode JSON.stringify() beim Umgang mit komplexen Objekten auf Einschränkungen stoßen kann. Erwägen Sie in solchen Fällen die Definition einer toJSON()-Methode in Ihren Objekten, um eine benutzerdefinierte Serialisierungslogik anzugeben.

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