OUJOOD.COM
Définition et Usage la méthode serialize()
La méthode serialize() crée une chaîne de texte codé URL en sérialisant les valeurs du formulaire.
Vous pouvez sélectionner un ou plusieurs éléments de formulaire, ou l'élément de formulaire lui-même.
Les valeurs sérialisées peuvent être utilisées dans la chaîne de requête URL lors d'une requête AJAX.
Syntaxe
$(sélecteur).serialize()
Exemple Afficher le résultat des valeurs des élément de formulaire sérialisée :
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX la méthode serialize()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 style="color:green">www.oujood.com</h1>
<h2>jQuery la méthode serialize()</h2>
<form
action="">
Nom:
<input type="text" name="Nom" value="Mickey"><br>
Prénom:
<input type="text" name="Prenom"
value="Mouse" ><br>
</form>
<button>Exécuter</button>
<p id="contenu" style="border:solid 1px #000; width:300px;min-height:50px"></p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#contenu").text($("form").serialize());
});
});
</script>
</body>
</html>
Exemple Sérialiser un formulaire dans une chaîne, qui peut être envoyé à un serveur dans une requête Ajax.
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX la méthode serialize()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body, select { font-size:12px; }
form { margin:5px; }
p { color:red; margin:5px; font-size:14px;
}
b { color:red; }
</style>
</head>
<body>
<h1 style="color:green">www.oujood.com</h1>
<h2>jQuery la méthode serialize()</h2>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br /><br
/>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br/><br
/>
<input type="checkbox" name="check"
value="check1" id="ch1"/>
<label for="ch1">check1</label><br
/>
<input type="checkbox" name="check"
value="check2" checked="checked" id="ch2"/>
<label for="ch2">check2</label>
<br /><br
/>
<input type="radio" name="radio"
value="radio1" checked="checked" id="r1"/>
<label
for="r1">radio1</label><br />
<input type="radio" name="radio"
value="radio2" id="r2"/>
<label for="r2">radio2</label>
</form>
<p id="results"></p>
<script>
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio ").click(showValues);
$("select").change(showValues);
showValues();
</script>
</body>
</html>
Un autre exemple
Code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery AJAX la méthode serialize()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- code jQuery pour montrer le fonctionnement de la méthode serialize() -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").text($("form").serialize());
});
});
</script>
<style>
#d1,#demo,button{margin:5px;}
#d1 {
width: 300px;
height: 100px;
padding: 20px;
border: 2px solid green;
margin-bottom: 10px;
}
#demo{color:red; font-weight:800;font-size18px}
</style>
</head>
<body>
<h1 style="color:green">www.oujood.com</h1>
<h2>jQuery la méthode serialize()</h2>
<div id="d1">
<form action="">
Nom du site:
<input type="text" name="nomSite" value="oujood.com">
<br>
<br> Nom du collaborateur:
<input type="text" name="nomColaborateur" value="carabde">
<br>
</form>
<button>Envoyer</button>
</div>
<div id="demo"></div>
</body>
</html>