Wie konvertiere ich HTML5-FormData-Einträge in JSON ohne jQuery?

HTML5-FormData-Einträge in JSON umwandeln

Die Konvertierung von HTML5-FormData-Einträgen in JSON ist wichtig, wenn Sie mit Formulardaten arbeiten und diese an Serverendpunkte oder APIs übergeben. Hier ist eine Lösung, die nicht auf jQuery oder Serialisierung angewiesen ist:

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

Für bessere Lesbarkeit und Prägnanz können Sie ES6-Pfeilfunktionen verwenden:

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

Umgang mit mehreren Werten Formularelemente:

Wenn Sie Mehrfachauswahllisten oder andere Formularelemente mit mehreren Werten unterstützen müssen, können Sie die Lösung wie folgt erweitern:

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);

Direkt Übermittlung an einen Server ohne Konvertierung:

Wenn Sie FormData an einen Server übermitteln möchten, können Sie den JSON-Konvertierungsschritt umgehen und das FormData-Objekt selbst direkt über Ajax oder Fetch API senden:

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) => { 
  // Handle server response here... 
});

Überlegungen zu nicht serialisierbaren Objekten:

Bedenken Sie, dass die JSON-Stringify-Methode ohne zusätzliche Anpassung möglicherweise nicht alle Objekttypen verarbeiten kann. Wenn bei der Objektserialisierung Probleme auftreten, können Sie Ihre eigene toJSON()-Methode für das Objekt definieren, um das gewünschte Serialisierungsverhalten anzugeben.

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