Comment convertir HTML5 FormData en JSON sans sérialisation ?

Conversion des données de formulaire HTML5 en JSON sans sérialisation

Lorsque vous travaillez avec des formulaires HTML5, il peut s'avérer nécessaire de convertir les données du formulaire en JSON. Une approche courante consiste à sérialiser l'objet FormData ; cependant, cela n’est peut-être pas souhaitable dans tous les cas. Voici comment convertir les entrées FormData en JSON sans sérialisation :

Étape 1 : Itérer sur l'objet FormData

Utilisez la méthode forEach() pour parcourir l'objet FormData. entrées. Chaque entrée contient une clé (nom du champ) et une valeur (valeur d'entrée).

Étape 2 : Créer un objet simple

Initialisez un objet vide pour stocker le converti Données JSON.

Étape 3 : Convertir les entrées en paires clé-valeur

Dans le rappel forEach(), attribuez les valeurs à l'objet en fonction de leurs clés. Par exemple :

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

Étape 4 : Convertir l'objet en JSON

Enfin, utilisez la méthode JSON.stringify() pour convertir l'objet en chaîne JSON.

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

Utilisation des fonctions fléchées ES6

Vous pouvez simplifier la boucle forEach() à l'aide des fonctions fléchées ES6 :

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

Prise en charge de plusieurs valeurs

Si votre formulaire comprend des champs avec plusieurs valeurs, tels que des listes à sélection multiple, vous pouvez modifier le code ci-dessus pour les prendre en charge :

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

Envoi direct de FormData

Si votre objectif est de soumettre les données du formulaire via un XMLHttpRequest, vous pouvez envisager d'envoyer l'objet FormData directement sans le convertir en JSON. Cette approche est également prise en charge par l'API Fetch.

Gestion des objets complexes

Notez que la méthode JSON.stringify() peut rencontrer des limitations lors du traitement d'objets complexes. Dans de tels cas, envisagez de définir une méthode toJSON() dans vos objets pour spécifier une logique de sérialisation personnalisée.

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!