jQuery - méthode serializeArray ()

La description

le serializeArray( ) La méthode sérialise tous les formulaires et éléments de formulaire comme la méthode .serialize () mais renvoie une structure de données JSON avec laquelle vous pouvez travailler.

La structure JSON renvoyée n'est pas une chaîne. Vous devez utiliser un plugin ou une bibliothèque tierce pour "stringifier".

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

$.serializeArray( )

Paramètres

Voici la description de tous les paramètres utilisés par cette méthode -

  • NA

Exemple

En supposant que nous ayons le contenu PHP suivant dans le fichier serialize.php -

<?php
if( $_REQUEST["name"] ) {

   $name = $_REQUEST['name'];
   echo "Welcome ". $name;
   $age = $_REQUEST['age'];
   echo "<br />Your age : ". $age;
   $sex = $_REQUEST['sex'];
   echo "<br />Your gender : ". $sex;
}
?>

Voici un exemple simple montrant l'utilisation de cette méthode -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			
            $("#driver").click(function(event){
				
               $.post( 
                  "/jquery/serialize.php",
                  $("#testform").serializeArray(),
                  function(data) {
                     $('#stage1').html(data);
                  }
               );
					
               var fields = $("#testform").serializeArray();
               $("#stage2").empty();
					
               jQuery.each(fields, function(i, field){
                  $("#stage2").append(field.value + " ");
               });
					
            });
				
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.html file:</p>
		
      <div id = "stage1" style = "background-color:blue;">
         STAGE - 1
      </div>
		
      <br />
		
      <div id = "stage2" style = "background-color:blue;">
         STAGE - 2
      </div>
		
      <form id = "testform">
         <table>
            <tr>
               <td><p>Name:</p></td>
               <td><input type = "text" name = "name" size = "40" /></td>
            </tr>
				
            <tr>
               <td><p>Age:</p></td>
               <td><input type = "text" name = "age" size = "40" /></td>
            </tr>
				
            <tr>
               <td><p>Sex:</p></td>
               <td> <select name = "sex">
                  <option value = "Male" selected>Male</option>
                  <option value = "Female" selected>Female</option>
               </select></td>
            </tr>
				
            <tr>
               <td colspan = "2">
                  <input type = "button" id = "driver" value = "Load Data" />
               </td>
            </tr>  
         </table>
      </form>
   </body>
</html>

Cela produira le résultat suivant -

jquery-ajax.htm