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
Libérer: 2024-12-01 08:42:14
original
377 Les gens l'ont consulté

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>
Copier après la connexion

Nous souhaitons obtenir une sortie au format JSON suivant :

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}
Copier après la connexion

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"}
]
Copier après la connexion

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

"foo=1&bar=xxx&this=hi"
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal