oujood.com

jQuery AJAX la méthode serialize() Coder un ensemble d'éléments de formulaire sous forme de chaîne

La méthode .serialize() code une chaîne de caractères en notation standard. elle fonctionne sur un objet jQuery qui représente des éléments de formulaire
La méthode serialize() est une méthode intégrée à jQuery qui est utilisée pour créer une chaîne de texte en notation standard codée URL. Cette méthode peut agir sur un objet jQuery qui contient des contrôles de formulaires individuels sélectionnés, tels que des zones de saisie input, des zones de texte textarea, etc.

chercher |

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

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

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

  Copier le 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>
Par gerywa 25 juillet 2014 - mis à jour le 01 Mars 2022



Voir aussi nos tutoriel :

jQuery reférence sélecteur

jQuery reférence sélecteur

fonction chop, chop

Alias de rtrim

border-top-style

Définit le style de la bordure supérieure