วิธีทำให้อาร์เรย์ JavaScript เป็นข้อมูลแบบซีเรียไลซ์ (Serialize)

เมธอด 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() ใน JavaScript

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