Comment convertir HTML5 FormData en JSON ?

Conversion HTML5 FormData en JSON

La conversion des entrées d'un objet HTML5 FormData en JSON est une tâche courante dans le développement Web. Bien qu'il existe différentes approches pour y parvenir, la méthode la plus simple et la plus efficace consiste à utiliser la fonction forEach() directement sur l'objet FormData.

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

Cette approche parcourt chaque paire clé-valeur dans FormData. objet et les ajoute à un nouvel objet JavaScript. La méthode JSON.stringify() est ensuite utilisée pour convertir l'objet en chaîne JSON.

Mise à jour : fonctions fléchées ES6

Pour ceux qui préfèrent la syntaxe ES6, la la même solution peut être écrite à l'aide des fonctions fléchées :

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

Mise à jour 2 : prise en charge des éléments de formulaire à valeurs multiples

Pour prendre en charge les éléments de formulaire avec plusieurs valeurs, tels que multi -select lists, le code suivant peut être utilisé :

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

Mise à jour 3 : Soumission directe via XMLHttpRequest et Fetch API

Envoi de FormData directement à un serveur sans conversion est possible à l'aide de l'objet XMLHttpRequest ou de l'API Fetch :

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>

<code class="javascript">fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});</code>

Mise à jour 4 : Sérialisation JSON d'objets complexes

Une logique de sérialisation personnalisée peut être définie pour les objets complexes objets via la méthode toJSON().

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!