জাভাস্ক্রিপ্ট অ্যারে সিরিয়ালাইজ করার উপায়

serializeArray() মেথড সব ফর্ম ও ফর্ম এলিমেন্টকে সিরিয়ালাইজ করে, .serialize() মেথডের মতোই, কিন্তু এটি JSON ডেটা স্ট্রাকচার রিটার্ন করে যাতে আপনি সহজে কাজ করতে পারেন।

ধরুন, 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;
  }
?>

উদাহরণ

নিচের কোডে serializeArray() মেথডের বাস্তবায়ন দেখানো হয়েছে:

<html>
  <head>
    <title>jQuery উদাহরণ</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>ফলাফল লোড করতে বাটনে ক্লিক করুন:</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>