Comment récupérer les données d'un formulaire en tant qu'objet JSON à l'aide de JavaScript/jQuery ?

Récupération des données d'un formulaire avec JavaScript/jQuery

Lors de la capture des données d'un formulaire, vous pouvez rechercher une approche simple qui reflète la soumission traditionnelle en HTML uniquement. méthode. Considérez le formulaire suivant :

`

<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>

Votre objectif est d'obtenir l'objet JSON suivant à partir de ce formulaire :

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

Cependant, les approches trop simplistes comme celles-ci peuvent ne pas capturer avec précision tous les éléments du formulaire (tels que zones de texte, sélections, boutons radio et cases à cocher) :

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

Solution : $('form').serializeArray()

Heureusement, jQuery fournit le $ ('form').SerializeArray(), qui renvoie un tableau d'objets contenant le nom et la valeur de chaque formulaire element :

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

Option alternative : $('form').serialize()

Si vous préférez une représentation sous forme de chaîne des données du formulaire, vous pouvez utiliser $('form').serialize(), qui renvoie une chaîne codée en URL :

"foo=1&bar=xxx&this=hi"

Pour une démonstration en direct, reportez-vous au document fourni Démo jsfiddle.

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!