Comment puis-je récupérer les données d'un formulaire à l'aide de JavaScript/jQuery ?

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

Les soumissions de formulaires nécessitent souvent la récupération des données de formulaire pour validation ou traitement côté client. Ces données incluent des champs de saisie, des listes de sélection et d'autres éléments. Une question courante est de savoir comment obtenir ces données de manière simplifiée.

Utilisation de la méthode serializeArray() de jQuery

Une solution élégante consiste à exploiter la méthode jQuery(), qui renvoie un tableau d'objets représentant les données du formulaire. Cette méthode sérialise efficacement le formulaire dans un tableau de paires clé-valeur :

$(function () {
    var formData = $('#form').serializeArray();
});

Par exemple, si votre formulaire contient les champs suivants :

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

Le résultat sera :

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

Utilisation de la méthode serialize() de jQuery

Vous pouvez également utiliser jQuery() pour créer une représentation sous forme de chaîne de requête des données du formulaire :

$(function () {
    var formData = $('#form').serialize();
});

Cette méthode génère une chaîne contenant des paires clé-valeur séparées par des esperluettes, adaptées à la soumission à un serveur :

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

Démonstration

Afficher un démonstration pratique de la récupération des données de formulaire à l'aide des deux méthodes jQuery dans ce JSFiddle : https://jsfiddle.net/t7hvjne1/

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!