Comment accéder et sérialiser les données d'un formulaire avec JavaScript/jQuery ?

Accès aux données de formulaire avec JavaScript/jQuery

Récupérer les données de formulaire comme si elles étaient soumises via la méthode HTML classique peut être une tâche courante dans développement web. Pour y parvenir, JavaScript/jQuery propose deux options principales :

Option 1 : Utiliser $('form').serializeArray()

Cette méthode convertit les données du formulaire dans un tableau d'objets, chaque objet représentant un champ de formulaire. La sortie est au format suivant :

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

Option 2 : Utilisation de $('form').serialize()

Cette méthode récupère les données du formulaire sous la forme une chaîne, formatée pour être soumise via un POST request :

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

Capture d'éléments de formulaire complexes

Contrairement aux champs de saisie simples, les éléments de formulaire tels que les zones de texte, les sélections, les boutons radio et les cases à cocher nécessitent une gestion spécifique. Les deux méthodes mentionnées ci-dessus gèrent correctement les données d'éléments de formulaire complexes.

Exemple d'utilisation

Le code suivant montre comment utiliser les méthodes :

// Using serializeArray()
var formDataArray = $('form').serializeArray();

// Using serialize()
var formDataString = $('form').serialize();

Démonstration

Référez-vous à cette démo JSFiddle pour voir les méthodes en action : https://jsfiddle.net/

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!