博客

jQuery serializeArray()的例子

  • Post category:jquery

当我们需要提交form表单中的数据时，可以使用jQuery中的serialize()方法将表单中的数据序列化为可提交的字符串。但有时候，我们需要将表单中的数据格式化为数组的形式，这时候就可以使用jQuery中的serializeArray()方法。

使用方法

serializeArray()方法可以对指定的form表单进行序列化，并将序列化后的结果以JSON数组的形式返回。

var arr = $('form').serializeArray();
console.log(arr);

示例一

我们有一个包含三个input标签的form表单，分别是姓名、年龄和邮箱，代码如下：

<form id="form1">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>

  <label for="age">年龄：</label>
  <input type="text" id="age" name="age"><br>

  <label for="email">邮箱：</label>
  <input type="text" id="email" name="email"><br>
</form>

我们可以使用serializeArray()方法将上述表单的内容序列化为JSON数组，并输出到控制台：

var arr = $('#form1').serializeArray();
console.log(arr);

输出结果如下：

[
  {
    name: "name",
    value: "张三"
  },
  {
    name: "age",
    value: "20"
  },
  {
    name: "email",
    value: "zhangsan@example.com"
  }
]

可以看到，输出结果是一个包含三个对象的数组。每个对象包含两个属性：name和value，分别代表表单中元素的name属性和值。

示例二

在一些特殊的情况下，我们需要通过自己编写JS代码来手动序列化数据。例如，我们有一些动态生成的表单元素需要序列化，但是这些元素的name属性是不规则的。此时，我们可以使用serializeArray()方法手动传入一个包含表单数据的数组。

<form id="form2">
  <input type="text" name="info1">
  <input type="text" name="info2">
  <input type="text" name="info3">
  <input type="text" name="info4">
</form>

以下是手动序列化示例：

var arr1 = [
  { name: "info1", value: "a" },
  { name: "info2", value: "b" },
  { name: "info3", value: "c" },
  { name: "info4", value: "d" }
];

var arr2 = $('#form2').serializeArray();

console.log(arr1);
console.log(arr2);

输出结果如下：

[
  {
    name: "info1",
    value: "a"
  },
  {
    name: "info2",
    value: "b"
  },
  {
    name: "info3",
    value: "c"
  },
  {
    name: "info4",
    value: "d"
  }
]

[
  {
    name: "info1",
    value: "a"
  },
  {
    name: "info2",
    value: "b"
  },
  {
    name: "info3",
    value: "c"
  },
  {
    name: "info4",
    value: "d"
  }
]

可以看到，手动序列化和使用serializeArray()方法序列化的结果是一样的。通过手动序列化，我们可以灵活地对表单中的数据进行格式化和处理。

Tags: