القائمة الرئيسية

الصفحات

 jQuery - serializeArray( ) Method


Description

The serializeArray( ) method serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

The JSON structure returned is not a string. You must use a plugin or third-party library to "stringify".

Syntax

Here is the simple syntax to use this method −

الوصف تسلسل طريقة serializeArray () جميع النماذج وعناصر النموذج مثل طريقة .serialize () لكنها ترجع بنية بيانات JSON لتعمل معها. بنية JSON التي تم إرجاعها ليست سلسلة. يجب عليك استخدام مكون إضافي أو مكتبة جهة خارجية لـ "التشديد". بناء الجملة هنا هو بناء الجملة البسيط لاستخدام هذه الطريقة -

$.serializeArray( )

Parameters

Here is the description of all the parameters used by this method −

  • NA

Example

Assuming we have following PHP content in serialize.php file −

<?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;
}
?>

Following is a simple example a simple showing the usage of this method −


<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>
هل اعجبك الموضوع :

تعليقات