Maison >interface Web >js tutoriel >Comment extraire efficacement les données d'un formulaire avec JavaScript/jQuery ?

Comment extraire efficacement les données d'un formulaire avec JavaScript/jQuery ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-01 08:42:14328parcourir

How to Efficiently Extract Form Data with JavaScript/jQuery?

Récupération des données de formulaire avec JavaScript/jQuery

Question :

Comment pouvons-nous extraire efficacement les données de formulaire de la même manière aux soumissions de formulaires HTML classiques ? Par exemple, étant donné un formulaire avec les éléments suivants :

<form>
    <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>
</select>
</form>

Nous souhaitons obtenir une sortie au format JSON suivant :

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

Réponse :

Pour y parvenir, nous pouvons utiliser la fonction $('form').serializeArray(), qui produit un tableau d'objets où chaque objet représente un formulaire champ et sa valeur :

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

Alternativement, nous pouvons utiliser $('form').serialize(), qui renvoie une chaîne représentant les données du formulaire :

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

Découvrez cette démo JSFiddle pour un exemple pratique : [JSFiddle Demo](https://jsfiddle.net/bmmvo79d/)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn