Comment convertir HTML5 FormData en JSON sans jQuery ni sérialisation ?

Conversion de HTML5 FormData en JSON : un guide étape par étape

Problème : Conversion des entrées d'un Objet FormData en JSON sans jQuery ni sérialisation de l'objet entier.

Réponse :

Pour convertir les entrées d'un objet FormData en JSON, suivez ces étapes :

1. Créez un objet vide pour stocker les paires clé/valeur.
2. Parcourez l'objet FormData à l'aide d'une boucle ou d'une méthode comme forEach.
3. Pour chaque entrée, définissez la clé dans l'objet vide au nom de l'entrée et la valeur à sa valeur.
4. Convertissez l'objet en JSON à l'aide de la méthode JSON.stringify().

Exemple d'utilisation de forEach :

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

Exemple d'utilisation des fonctions fléchées ES6 :

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

Prise en charge des listes à sélection multiple :

Si votre formulaire contient des listes à sélection multiple ou d'autres éléments avec plusieurs valeurs, vous pouvez utiliser l'approche suivante :

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

Envoi de FormData à un serveur :

Si vous avez l'intention de soumettre les données du formulaire à un serveur, vous pouvez ignorer la conversion en JSON et envoyer directement l'objet FormData à l'aide d'une requête API XMLHttpRequest ou Fetch.

Attention :

La méthode JSON.stringify() peut ne pas prendre en charge tous les types d'objets. Si votre objet contient des types non pris en charge, vous devrez peut-être implémenter une méthode toJSON() personnalisée pour spécifier la logique de sérialisation.

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!