OUJOOD.COM
Définition et utilisation de la méthodeserializeArray()
jQuery cours tutorial AJAXLa méthode serializeArray() de jQuery est une fonction essentielle pour la manipulation de formulaires en JavaScript. Elle permet de créer automatiquement un tableau d'objets JavaScript contenant les paires nom-valeur de tous les éléments d'un formulaire HTML. Cette méthode est particulièrement utile pour la soumission de formulaires via AJAX, le traitement des données côté client, et l'envoi de requêtes asynchrones au serveur.
Contrairement à la méthode serialize() qui retourne une chaîne de caractères encodée URL, serializeArray() génère une structure de données JavaScript directement exploitable, ce qui facilite grandement la manipulation et la validation des données de formulaire avant leur envoi. Chaque élément du tableau retourné contient deux propriétés : name (le nom de l'élément) et value (sa valeur actuelle).
Éléments de formulaire compatibles avec serializeArray()
La méthode serializeArray() prend en charge tous les éléments de formulaire HTML standard : champs texte (<input type="text">), zones de texte (<textarea>), listes déroulantes (<select>), cases à cocher (<input type="checkbox">), et boutons radio (<input type="radio">). Vous pouvez sélectionner un ou plusieurs éléments spécifiques du formulaire, ou appliquer la méthode directement sur l'élément <form> pour capturer tous ses champs en une seule opération.
Syntaxe de la méthode serializeArray()
$(selector).serializeArray()
Paramètres : Cette méthode ne prend aucun paramètre. Elle analyse automatiquement les éléments sélectionnés et extrait leurs valeurs.
Valeur de retour : Un tableau (Array) d'objets JavaScript, où chaque objet possède les propriétés name et value.
Exemple pratique : Récupération et affichage dynamique des valeurs d'un formulaire
Cet exemple démontre comment utiliser serializeArray() pour capturer en temps réel les valeurs d'un formulaire complexe contenant différents types d'éléments. Le script parcourt le tableau d'objets généré et affiche dynamiquement les valeurs sélectionnées par l'utilisateur. Cette technique est idéale pour la validation de formulaire en temps réel et l'aperçu avant soumission.
<!DOCTYPE html>
<html>
<head>
<title>jQuery méthode serializeArray - Exemple complet</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body, select { font-size: 14px; font-family: Arial, sans-serif; }
form { margin: 20px; padding: 15px; background: #f5f5f5; border-radius: 5px; }
p { color: #c00; margin: 10px 0; }
b { color: #0066cc; }
#resultat { padding: 10px; background: #fff; border: 1px solid #ddd; min-height: 30px; }
label { margin-left: 5px; margin-right: 15px; }
</style>
</head>
<body>
<h2>Démonstration de serializeArray()</h2>
<p><b>Résultat en temps réel :</b> <span id="resultat"></span></p>
<form id="formulaire-demo">
<!-- Liste déroulante simple -->
<label>Sélection simple :</label>
<select name="choix_simple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select><br/><br/>
<!-- Liste déroulante multiple -->
<label>Sélection multiple :</label>
<select name="choix_multiple" multiple="multiple" size="3">
<option value="multi1" selected="selected">Multiple 1</option>
<option value="multi2">Multiple 2</option>
<option value="multi3" selected="selected">Multiple 3</option>
</select><br/><br/>
<!-- Cases à cocher -->
<label>Cases à cocher :</label>
<input type="checkbox" name="preference" value="choix_a" id="check1"/>
<label for="check1">Choix A</label>
<input type="checkbox" name="preference" value="choix_b" checked="checked" id="check2"/>
<label for="check2">Choix B</label>
<input type="checkbox" name="preference" value="choix_c" id="check3"/>
<label for="check3">Choix C</label><br/><br/>
<!-- Boutons radio -->
<label>Boutons radio :</label>
<input type="radio" name="niveau" value="debutant" checked="checked" id="radio1"/>
<label for="radio1">Débutant</label>
<input type="radio" name="niveau" value="intermediaire" id="radio2"/>
<label for="radio2">Intermédiaire</label>
<input type="radio" name="niveau" value="avance" id="radio3"/>
<label for="radio3">Avancé</label>
</form>
<script>
// Fonction pour afficher les valeurs du formulaire sérialisé
function afficherValeurs() {
// Sérialise tous les éléments input du formulaire en tableau d'objets
var champsFormulaire = $(":input").serializeArray();
// Vide le conteneur de résultats avant d'ajouter les nouvelles valeurs
$("#resultat").empty();
// Parcourt chaque objet du tableau et affiche sa valeur
jQuery.each(champsFormulaire, function(index, champ){
$("#resultat").append("<strong>" + champ.name + ":</strong> " + champ.value + " | ");
});
}
// Événements : met à jour l'affichage à chaque changement
$(":checkbox, :radio").click(afficherValeurs);
$("select").change(afficherValeurs);
// Affiche les valeurs initiales au chargement de la page
afficherValeurs();
</script>
</body>
</html>Exemple avancé : Sérialisation et traitement des données de formulaire
Ce second exemple illustre l'utilisation de serializeArray() pour préparer les données d'un formulaire avant leur envoi au serveur. La méthode $.each() permet d'itérer sur le tableau d'objets retourné et de formater les données selon vos besoins. Cette approche est particulièrement utile pour la validation côté client, la transformation de données, ou la création de requêtes AJAX personnalisées.
<!DOCTYPE html>
<html>
<head>
<title>jQuery serializeArray - Traitement des données</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
form { background: #f0f8ff; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
input[type="text"] { padding: 8px; margin: 5px 0; width: 250px; border: 1px solid #ccc; border-radius: 4px; }
button { background: #0066cc; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; }
button:hover { background: #0052a3; }
#affichage-resultats { background: #fff; padding: 15px; border: 2px solid #0066cc; border-radius: 5px; min-height: 40px; }
</style>
</head>
<body>
<h2>Formulaire de contact avec sérialisation</h2>
<form id="form-contact">
<!-- Champ nom -->
<label for="nom">Nom complet :</label><br/>
<input type="text" name="nom" id="nom" value="Dupont" /><br/>
<!-- Champ prénom -->
<label for="prenom">Prénom :</label><br/>
<input type="text" name="prenom" id="prenom" value="Jean" /><br/>
<!-- Champ email -->
<label for="email">Email :</label><br/>
<input type="email" name="email" id="email" value="jean.dupont@example.com" /><br/><br/>
<!-- Champ téléphone -->
<label for="telephone">Téléphone :</label><br/>
<input type="tel" name="telephone" id="telephone" value="06 12 34 56 78" /><br/>
</form>
<button id="btn-executer">Sérialiser et afficher les données</button>
<h3>Données sérialisées :</h3>
<div id="affichage-resultats"></div>
<script>
$(document).ready(function(){
// Gestionnaire d'événement au clic sur le bouton
$("#btn-executer").click(function(){
// Sérialise le formulaire en tableau d'objets {name, value}
var donneesFormulaire = $("#form-contact").serializeArray();
// Vide le conteneur de résultats
$("#affichage-resultats").empty();
// Parcourt chaque élément du tableau sérialisé
$.each(donneesFormulaire, function(index, champ){
// Affiche le nom du champ et sa valeur de manière formatée
$("#affichage-resultats").append(
"<p><strong>" + champ.name.toUpperCase() + " :</strong> " + champ.value + "</p>"
);
});
// Affiche également le tableau complet en format JSON pour débogage
console.log("Données sérialisées :", donneesFormulaire);
});
});
</script>
</body>
</html>Exemple bonus : Conversion en objet JSON pour requêtes AJAX
Cet exemple montre comment transformer le tableau retourné par serializeArray() en objet JSON standard, format idéal pour les requêtes AJAX modernes et les APIs RESTful. Cette technique est essentielle pour l'intégration avec des frameworks backend modernes.
<script> // Fonction pour convertir serializeArray() en objet JSON function formulaireVersJSON(formulaire) { // Sérialise le formulaire en tableau var tableauDonnees = $(formulaire).serializeArray(); // Crée un objet vide pour stocker les données var objetJSON = {}; // Transforme le tableau en objet clé-valeur $.each(tableauDonnees, function(index, champ) { objetJSON[champ.name] = champ.value; }); // Retourne l'objet JSON exploitable return objetJSON; } // Utilisation avec une requête AJAX $("#mon-formulaire").submit(function(e) { e.preventDefault(); // Convertit les données du formulaire en JSON var donneesJSON = formulaireVersJSON(this); // Envoie les données au serveur via AJAX $.ajax({ url: "traitement.php", type: "POST", data: donneesJSON, success: function(reponse) { console.log("Succès :", reponse); }, error: function(xhr, status, erreur) { console.error("Erreur :", erreur); } }); }); </script>
Différences entre serialize() et serializeArray()
Il est important de comprendre les différences entre serialize() et serializeArray() pour choisir la méthode appropriée selon votre cas d'utilisation :
- serialize() : Retourne une chaîne encodée URL (ex: "nom=Jean&prenom=Dupont"), idéale pour les soumissions de formulaires traditionnelles
- serializeArray() : Retourne un tableau d'objets JavaScript, parfait pour la manipulation de données côté client et la création de requêtes AJAX personnalisées
Compatibilité et versions jQuery
La méthode serializeArray() est disponible depuis jQuery 1.2 et reste pleinement compatible avec toutes les versions modernes, y compris jQuery 3.x utilisé en 2026. Pour garantir une compatibilité optimale, il est recommandé d'utiliser la dernière version stable de jQuery via CDN.
Par carabde | Publié le 25 juillet 2014 | Mis à jour le 10 février 2026