Comment convertir HTML5 FormData en JSON pour la communication client-serveur ?

Conversion de HTML5 FormData en JSON

La conversion d'objets HTML5 FormData en JSON permet la sérialisation des données de formulaire dans un format lisible par machine. Ceci est utile pour transmettre des données entre le client et le serveur.

Méthode utilisant un objet personnalisé et JSON.stringify

Pour convertir les entrées FormData en JSON sans jQuery ni sérialiser le objet entier :

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

Mise à jour 1 : Fonctions fléchées ES6

Utilisation des fonctions fléchées ES6 :

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

Mise à jour 2 : Prise en charge des éléments à valeurs multiples

Pour les listes à sélection multiple ou d'autres éléments de formulaire avec plusieurs valeurs :

<code class="javascript">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);</code>

Mise à jour 3 : Transmission directe de FormData

Pour envoyer FormData à un serveur via XMLHttpRequest :

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

Ou en utilisant l'API Fetch :

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

Mise à jour 4 : méthode toJSON personnalisée pour les complexes Objets

Pour les objets personnalisés, définissez une méthode toJSON pour sérialiser leur contenu. Reportez-vous à la documentation MDN pour plus d'informations sur les limitations de JSON.stringify.

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!