Cách tuần tự hóa (serialize) mảng trong JavaScript

Phương thức serializeArray() của jQuery tuần tự hóa dữ liệu form thành mảng đối tượng JSON (tên/giá trị), thuận tiện cho việc gửi dữ liệu qua AJAX.

Ví dụ

Dưới đây là ví dụ hoàn chỉnh sử dụng serializeArray() kết hợp với PHP backend:

<html>
  <head>
    <title>Ví dụ jQuery serializeArray</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
      $(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>Nhấn nút để gửi dữ liệu form:</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>Tên:</td><td><input type="text" name="name" size="40"/></td></tr>
        <tr><td>Tuổi:</td><td><input type="text" name="age" size="40"/></td></tr>
        <tr><td>Giới tính:</td><td>
          <select name="sex">
            <option value="Male" selected>Nam</option>
            <option value="Female">Nữ</option>
          </select></td></tr>
        <tr><td colspan="2"><input type="button" id="driver" value="Gửi dữ liệu"/></td></tr>
      </table>
    </form>
  </body>
</html>

Lưu ý: Cần nhúng thư viện jQuery để sử dụng serializeArray().