jQuery | serializeArray() 与示例

serializeArray() 方法是 jQuery 库中的一个序列化表单元素的方法。该方法将表单元素的值编码为数组对象。在提交表单时，它可以方便地将表单数据转换为字符串。本文将深入介绍此方法及其用法。

语法

$(selector).serializeArray()

描述

serializeArray() 方法将匹配元素集合中的所有表单元素的当前值序列化为一个数组。函数返回的数组是类似于对象数组的对象，每个对象都有包含 name 和 value 属性，分别对应表单元素的名称和值。

示例

假设我们有如下 HTML 表单：

<form>
  <label for="firstName">First Name:</label>
  <input type="text" id="firstName" name="firstName"><br>
  <label for="lastName">Last Name:</label>
  <input type="text" id="lastName" name="lastName"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <button type="submit">Submit</button>
</form>

可以使用 serializeArray() 方法来序列化表单数据：

$('form').submit(function(event) {
  event.preventDefault();
  
  var formData = $(this).serializeArray();
  console.log(formData);
});

当用户点击 Submit 按钮时，将会打印出一个数组：

[
  {name: 'firstName', value: 'John'},
  {name: 'lastName', value: 'Doe'},
  {name: 'email', value: 'johndoe@example.com'}
]

这个数组可以被用于发送 AJAX 请求，并且可以被服务器端解析为 POST 参数。以下是一个示例 AJAX 请求的代码：

$.ajax({
  url: '/path/to/url',
  data: formData,
  type: 'POST',
  success: function(data) {
    console.log(data);
  }
});

总结

serializeArray() 方法是一个非常方便的工具，可以将表单数据序列化为数组对象。它可以简化提交表单的过程，也可以使 AJAX 请求更加简单。如果你需要使用表单数据，建议使用该方法。