Maison >interface Web >js tutoriel >Comment obtenir des données de formulaire à l'aide de JavaScript et jQuery ?

Comment obtenir des données de formulaire à l'aide de JavaScript et jQuery ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-12 02:03:02344parcourir

How to Get Form Data Using JavaScript and jQuery?

Obtenir des données de formulaire avec JavaScript/jQuery

Lorsque vous travaillez avec des formulaires, il est souvent nécessaire de récupérer les données qu'ils contiennent par programmation. Ces données peuvent être utilisées pour un traitement ultérieur, une validation ou un envoi à un serveur. Heureusement, en utilisant JavaScript et jQuery, l'obtention de ces données est un processus simple.

Méthode serializeArray() de jQuery

Une méthode efficace et pratique pour obtenir les données d'un formulaire consiste à utiliser la méthode serializeArray() de jQuery. Cette méthode renvoie un tableau d'objets, où chaque objet représente un élément d'entrée dans le formulaire. Chaque objet contient le nom et les propriétés de valeur de l'élément.

Pour utiliser cette méthode, invoquez-la simplement sur un sélecteur de formulaire :

var data = $('form').serializeArray();

Le tableau de données contiendra des objets comme les suivants :

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

Méthode serialize() de jQuery

Une autre option consiste à utiliser La méthode serialize() de jQuery, qui renvoie une string. Cette chaîne représente les données du formulaire dans le format accepté par une soumission de formulaire HTML traditionnel.

Pour utiliser cette méthode, invoquez-la simplement sur un sélecteur de formulaire :

var data = $('form').serialize();

La variable de données contiendra une chaîne comme la suivante :

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

Démo

Pour voir ces méthodes en action, consultez le violon suivant : https://jsfiddle.net/w84ny75L/

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