J'ai eu le même problème récemment et je suis sorti avec ce plugin .toJSON jQuery qui convertit un formulaire en un objet JSON avec la même structure. Cela est également particulièrement utile pour les formulaires générés dynamiquement où vous souhaitez laisser votre utilisateur ajouter plus de champs à des endroits spécifiques.
Le fait est que vous voudrez peut-être réellement créer un formulaire afin qu'il ait une structure elle-même, alors disons que vous voulez créer un formulaire où l'utilisateur insère ses endroits préférés en ville: vous pouvez imaginer ce formulaire pour représenter un <places>...</places>
élément XML contenant un liste de lieux l'utilisateur aime ainsi une liste d' <place>...</place>
éléments contenant chacun par exemple un <name>...</name>
élément, un <type>...</type>
élément puis une liste d' <activity>...</activity>
éléments pour représenter les activités que vous pouvez effectuer dans un tel endroit. Donc, votre structure XML serait comme ceci:
<places>
<place>
<name>Home</name>
<type>dwelling</type>
<activity>sleep</activity>
<activity>eat</activity>
<activity>watch TV</activity>
</place>
<place>...</place>
<place>...</place>
</places>
À quel point ce serait cool d'avoir un objet JSON à partir de cela qui représenterait cette structure exacte afin que vous puissiez soit:
- Stockez cet objet tel qu'il est dans n'importe quelle base de données de type CouchDB
- Lisez-le depuis votre serveur $ _POST [] et récupérez un tableau correctement imbriqué que vous pouvez ensuite manipuler sémantiquement
- Utilisez un script côté serveur pour le convertir en un fichier XML bien formé (même si vous ne connaissez pas sa structure exacte a priori)
- Il suffit de l'utiliser en quelque sorte tel qu'il est dans n'importe quel script de serveur de type Node.js
OK, nous devons donc maintenant réfléchir à la manière dont un formulaire peut représenter un fichier XML.
Bien sûr, la <form>
balise est le root
, mais nous avons cet <place>
élément qui est un conteneur et non un élément de données lui-même, nous ne pouvons donc pas utiliser de balise d'entrée pour cela.
Voici où la <fieldset>
balise est utile! Nous utiliserons des <fieldset>
balises pour représenter tous les éléments de conteneur dans notre représentation de formulaire / XML et ainsi obtenir un résultat comme celui-ci:
<form name="places">
<fieldset name="place">
<input type="text" name="name"/>
<select name="type">
<option value="dwelling">Dwelling</option>
<option value="restoration">Restoration</option>
<option value="sport">Sport</option>
<option value="administrative">Administrative</option>
</select>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
<input type="text" name="activity"/>
</fieldset>
</form>
Comme vous pouvez le voir dans ce formulaire, nous enfreignons la règle des noms uniques, mais c'est OK car ils seront convertis en un tableau d'éléments donc ils ne seront référencés que par leur index à l'intérieur du tableau.
À ce stade, vous pouvez voir comment il n'y a pas de name="array[]"
nom similaire dans le formulaire et tout est joli, simple et sémantique.
Maintenant, nous voulons que ce formulaire soit converti en un objet JSON qui ressemblera à ceci:
{'places':{
'place':[
{
'name': 'Home',
'type': 'dwelling',
'activity':[
'sleep',
'eat',
'watch TV'
]
},
{...},
{...}
]
}}
Pour ce faire, j'ai développé ce plugin jQuery ici que quelqu'un a aidé à optimiser dans ce fil de révision de code et ressemble à ceci:
$.fn.toJSO = function () {
var obj = {},
$kids = $(this).children('[name]');
if (!$kids.length) {
return $(this).val();
}
$kids.each(function () {
var $el = $(this),
name = $el.attr('name');
if ($el.siblings("[name=" + name + "]").length) {
if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
obj[name] = obj[name] || [];
obj[name].push($el.toJSO());
}
} else {
obj[name] = $el.toJSO();
}
});
return obj;
};
J'ai aussi fait ce blog pour expliquer cela davantage.
Cela convertit tout dans un formulaire en JSON (même radio et cases à cocher) et tout ce qu'il vous reste à faire est d'appeler
$.post('script.php',('form').toJSO(), ...);
Je sais qu'il existe de nombreuses façons de convertir des formulaires en objets JSON et bien sûr .serialize()
et .serializeArray()
très bien dans la plupart des cas et sont principalement destinés à être utilisés, mais je pense que toute cette idée d' écrire un formulaire comme une structure XML avec des noms significatifs et de le convertir en un Un objet JSON bien formé vaut la peine d'être essayé, le fait que vous puissiez ajouter des balises d'entrée du même nom sans vous inquiéter est très utile si vous devez récupérer des données de formulaires générées dynamiquement.
J'espère que ça aidera quelqu'un!