Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để tuần tự hóa một mảng JavaScript?


serializeArray () phương thức tuần tự hóa tất cả các biểu mẫu và các phần tử của biểu mẫu như phương thức .serialize () nhưng trả về cấu trúc dữ liệu JSON để bạn làm việc với.

Giả sử sau đây là nội dung trong tệp 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;
   }
?>

Ví dụ

Sau đây là mã để triển khai serializeArray () phương thức trong 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>