متد serializeArray() در jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 28 خرداد 1401

متد serializeArray() در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. این متد تمام فرم‌ها و عناصر فرم مانند متد serialize() را سریال می‌کند، اما یک ساختار داده JSON را برای شما برمی‌گرداند تا با آن کار کنید. ساختار JSON بازگشتی یک رشته نیست، برای “stringify” باید از افزونه یا کتابخانه شخص ثالث استفاده کنید.

ساختار متد serializeArray() در jQuery

در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:

$.serializeArray( )

مثال

با فرض اینکه محتوای PHP زیر را در فایل 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;
}
?>

حالا با فرض محتوای بالا، در قطعه کد زیر با یک مثال ساده نشان داده شده است که استفاده از این متد چگونه است:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.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>

مطالعه مقاله بررسی Ajax در jQuery به شما پیشنهاد می‌شود؛ امیدواریم از مطالعه این مقاله آموزش jQuery لذت برده باشید. لطفاً نظرات خود را با ما به اشتراک بگذارید و سئوالات خود را در بخش نظرات مطرح کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊