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
395 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!

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