Comment convertir des entrées HTML5 FormData en JSON sans jQuery ?

Transformation des entrées HTML5 FormData en JSON

La conversion des entrées HTML5 FormData en JSON est essentielle lorsque vous travaillez avec des données de formulaire et les transmettez aux points de terminaison du serveur ou aux API. Voici une solution qui ne repose pas sur jQuery ou la sérialisation :

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

Pour une meilleure lisibilité et concision, vous pouvez utiliser les fonctions fléchées ES6 :

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

Gestion de plusieurs valeurs Éléments de formulaire :

Si vous devez prendre en charge des listes à sélection multiple ou d'autres éléments de formulaire avec plusieurs valeurs, vous pouvez développer la solution comme suit :

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

Direct Soumission au serveur sans conversion :

Si votre objectif est de soumettre FormData à un serveur, vous pouvez contourner l'étape de conversion JSON et envoyer directement l'objet FormData lui-même via Ajax ou Fetch API :

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

Considérations relatives aux objets non sérialisables :

N'oubliez pas que la méthode JSON stringify peut ne pas gérer tous les types d'objets sans personnalisation supplémentaire. Si vous rencontrez des problèmes avec la sérialisation d'objets, vous pouvez définir votre propre méthode toJSON() sur l'objet pour spécifier le comportement de sérialisation souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!