Méthode serializeArray() jQuery ajax

Guide de référence Ajax jQuery

Exemple

Affichez le résultat sérialisé sous forme d'array des valeurs du formulaire :

$("button").click(function(){
  x=$("form").serializeArray();
  $.each(x, function(i, field){
    $("#results").append(field.name + ":" + field.value + " ");
  );
);

Essayer personnellement

Définition et utilisation

La méthode serializeArray() crée un tableau d'objets (nom et valeur) en sérialisant les valeurs du formulaire.

Vous pouvez sélectionner un ou plusieurs éléments de formulaire (comme input et/ou textarea), ou l'élément form lui-même.

Syntaxe

$(sélecteur).serializeArray()

Explications détaillées

serializeArray() méthode sérialise les éléments de formulaire (similaires .serialize() méthode)), et retourne des données de structure JSON.

Attention :Cette méthode retourne un objet JSON而非 une chaîne JSON. Il est nécessaire d'utiliser un plugin ou une bibliothèque tierce pour la conversion en chaîne.

Le JSON objet retourné est composé d'un tableau d'objets, chacun contenant une ou deux paires de noms et de valeurs - les paramètres name et value (si value n'est pas vide). Par exemple :

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // valeur vide
]

.serializeArray() utilise les normes W3C sur controls réussisLes éléments doivent être actifs (les éléments désactivés ne sont pas inclus) et doivent avoir une propriété name. Les valeurs des boutons de soumission ne sont pas sérialisées. Les données des éléments de sélection de fichiers ne sont pas non plus sérialisées.

Cette méthode permet d'effectuer des opérations sur des objets d'éléments de formulaires sélectionnés individuellement, tels que <input>, <textarea> et <select>. Cependant, une méthode plus pratique consiste à sélectionner directement l'étiquette <form> elle-même pour effectuer des opérations de sérialisation. 

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
);

Le code ci-dessus génère la structure de données suivante (hypothèse : le navigateur prend en charge console.log) :

[
  {
    name: a
    value: 1
  },
  {
    name: b
    value: 2
  },
  {
    name: c
    value: 3
  },
  {
    name: d
    value: 4
  },
  {
    name: e
    value: 5
  }
]

Exemple

Obtenir le contenu du formulaire et l'insérer dans la page web :

Code HTML :

<p id="results"><b>Résultats:</b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>

Code jQuery :

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
);

Guide de référence Ajax jQuery