如何序列化 JavaScript 数组？

在本教程中，我们将学习如何序列化 JavaScript 数组。serializeArray() 方法序列化所有表单和表单元素，类似于 .serialize() 方法，但返回 JSON 数据结构供您使用。

可以使用 jQuery 内置函数 serializeArray() 创建 JavaScript 对象数组，该数组可以编码为 JSON 字符串。它使用来自 jQuery 的一组表单和/或表单控件。有几种类型的控件。任何 JavaScript 对象都可以使用 JSON 字符串转换为 JSON，然后可以将其发送到服务器。

语法

现在让我们看看序列化 JavaScript 数组的语法：

$(selector).serializeArray()

在上面的语法中，我们可以看到我们必须提供一个选择器，然后我们将使用 ‘serializeArray()’ 方法从给定的 ‘selector’ 获取数据，它将返回一个包含所有数据的字符串。

算法

我们已经看到了上面学习如何序列化 JavaScript 数组的语法，现在我们将逐步看到完整的方法：

  • 首先，我们必须使用 <form> 标签创建一个表单以获取用户输入，并将为表单定义一个 id 以标识它。

  • 在表单标签中，我们将使用 <input> 标签创建一些输入字段以获取用户的输入。

  • 我们将定义一个按钮将所有数据提交到脚本，或者通过单击按钮将调用脚本中的函数并收集这些数据。

  • 在脚本中，首先必须在代码中添加 JQuery，为此，我们可以向代码添加外部源。

  • 我们将使用其 id 和单击事件从表单获取数据，然后可以使用该数据将其打印到文档、后端等。

  • 返回的数据将以字符串形式出现，因此易于使用该数据并对其应用某些函数。

我们已经看到了学习如何序列化 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’ 的输入按钮。

在脚本中，首先我们使用外部源 ‘serializeArray()’ 将 JQuery 包含在代码中，因为它是 JQuery 的方法。然后在脚本中，我们使用其 id 和 serializeArray() 方法从表单收集数据，并以两种形式打印：第一种可以在第一个 div 元素中看到，第二种可以在第二个 div 元素中看到。

结论

在本教程中，我们学习了如何序列化 JavaScript 数组。serializeArray() 方法序列化所有表单和表单元素，类似于 serialize() 方法，但返回 JSON 数据结构供您使用。

可以使用 jQuery 内置函数 serializeArray() 创建 JavaScript 对象数组，该数组可以编码为 JSON 字符串。它使用来自 jQuery 的一组表单和/或表单控件。有几种类型的控件。任何 JavaScript 对象都可以使用 JSON 字符串转换为 JSON，然后可以将其发送到服务器。

更新于：2022年11月7日

2K+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告