如何序列化 JavaScript 陣列？

在本教程中，我們將學習如何序列化 JavaScript 陣列。serializeArray() 方法序列化所有表單和表單元素，類似於 .serialize() 方法，但返回 JSON 資料結構以供使用。

可以使用 jQuery 內建函式 serializeArray() 建立 JavaScript 物件陣列，該陣列可以編碼為 JSON 字串。它使用來自 jQuery 的一組表單和/或表單控制元件。有幾種型別的控制元件。任何 JavaScript 物件都可以使用 JSON 字串轉換為 JSON，然後可以將其傳送到伺服器。

語法

現在讓我們來看一下序列化 JavaScript 陣列的語法：

$(selector).serializeArray()

在上面的語法中，我們可以看到我們必須提供一個選擇器，然後我們將使用 'serializeArray()' 方法從給定的 'selector' 獲取資料，它將返回一個包含所有資料的字串。

演算法

我們已經看到了上面學習如何序列化 JavaScript 陣列的語法，現在我們將逐步檢視完整的步驟：

  • 首先，我們必須使用 <form> 標籤建立一個表單以獲取使用者輸入，我們將為表單定義一個 id 以標識它。

  • 在表單標籤中，我們將使用 <input> 標籤建立一些輸入欄位以獲取使用者的輸入。

  • 我們將定義一個按鈕以將所有資料提交到指令碼，或者透過單擊按鈕來呼叫指令碼中的函式並收集這些資料。

  • 在指令碼中，首先，我們必須在程式碼中新增 JQuery，為此，我們可以向我們的程式碼新增外部資源。

  • 我們將使用其 id 和 click 事件從表單獲取資料，然後可以使用該資料將其列印到文件、後端等。

  • 返回的資料將以字串的形式存在，因此很容易使用該資料並對其應用某些函式。

我們已經看到了學習如何序列化 JavaScript 陣列的語法和演算法，現在讓我們來看一個例子來實現上述步驟。

示例

在這個例子中，我們將建立一個表單，該表單將獲取一些使用者輸入，並使用 serialize.Array() 方法從表單獲取資料並將其列印到文件中。

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

在程式碼主體中，首先我們定義了一個段落，然後定義了兩個帶有 id 'stage1' 和 'stage2' 的 div，背景顏色為藍色，並將最初包含其名稱的資料。

之後，我們定義了 id 為 'testform' 的表單，並在其中定義了一些輸入欄位以從使用者收集一些資料，所有輸入欄位都以表格形式設計。我們定義了一個 id 為 'driver' 的輸入按鈕。

在指令碼中，首先，我們使用外部資源包含了 JQuery 程式碼，因為 'serializeArray()' 是 JQuery 的方法。然後在指令碼中，我們使用其 id 和 serializeArray() 方法從表單收集資料，並以兩種形式打印出來，第一種可以在第一個 div 元素中看到，第二種可以在第二個 div 元素中看到。

結論

在本教程中，我們學習瞭如何序列化 JavaScript 陣列。serializeArray() 方法序列化所有表單和表單元素，類似於 serialize() 方法，但返回 JSON 資料結構以供使用。

可以使用 jQuery 內建函式 serializeArray() 建立 JavaScript 物件陣列，該陣列可以編碼為 JSON 字串。它使用來自 jQuery 的一組表單和/或表單控制元件。有幾種型別的控制元件。任何 JavaScript 物件都可以使用 JSON 字串轉換為 JSON，然後可以將其傳送到伺服器。

更新於：2022年11月7日

2K+ 次檢視

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.