Wie konvertiert man HTML5-Formdaten in JSON ohne jQuery oder Serialisierung?

HTML5-Formulardaten in JSON konvertieren: Eine Schritt-für-Schritt-Anleitung

Problem:Konvertieren der Einträge von a FormData-Objekt in JSON ohne jQuery oder Serialisierung des gesamten Objekts.

Antwort:

Um die Einträge eines FormData-Objekts in JSON zu konvertieren, befolgen Sie diese Schritte:

1. Erstellen Sie ein leeres Objekt zum Speichern der Schlüssel/Wert-Paare.
2. Iterieren Sie das FormData-Objekt mit einer Schleife oder Methode wie forEach.
3. Legen Sie für jeden Eintrag den Schlüssel fest im leeren Objekt auf den Namen des Eintrags und den Wert auf seinen Wert.
4. Konvertieren Sie das Objekt mit der Methode JSON.stringify() in JSON.

Beispiel für die Verwendung von forEach :

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

Beispiel für die Verwendung von ES6-Pfeilfunktionen:

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

Unterstützung für Mehrfachauswahllisten:

Wenn Ihr Formular Mehrfachauswahllisten oder andere Elemente mit mehreren Werten enthält, können Sie den folgenden Ansatz verwenden:

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

Formulardaten an einen Server senden:

Wenn Sie beabsichtigen, die Formulardaten an einen Server zu senden, können Sie die Konvertierung in JSON überspringen und das FormData-Objekt direkt über eine XMLHttpRequest- oder Fetch-API-Anfrage senden.

Achtung:

Die Methode JSON.stringify() unterstützt möglicherweise nicht alle Objekttypen. Wenn Ihr Objekt nicht unterstützte Typen enthält, müssen Sie möglicherweise eine benutzerdefinierte toJSON()-Methode implementieren, um die Serialisierungslogik anzugeben.

Das obige ist der detaillierte Inhalt vonWie konvertiert man HTML5-Formdaten in JSON ohne jQuery oder Serialisierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!