上一篇讲了 serialize()，它返回的是 URL 编码字符串，适合直接往 URL 上拼或者作为 AJAX 的 data 参数传走。但有时候我们拿到表单数据后还想做点处理——比如过滤空值、增加额外字段、修改某个值再提交。这时候面对一串 key=value&key=value 的字符串就有点别扭了，解析起来麻烦。
serializeArray() 就是为这种场景准备的。它不返回字符串，而是返回一个 JavaScript 对象数组，每个对象包含 name 和 value 两个属性，对应表单控件的 name 和 value。操作数组比解析字符串方便得多，这也是两个方法的核心区别。
语法形式
$(selector).serializeArray()
selector 通常指向一个 form 元素或一组表单控件。返回值是类似这样的数组：
[
{name: "FirstName", value: "Ajeet"},
{name: "LastName", value: "Maurya"}
]
每个数组元素都是一个包含 name 和 value 属性的普通对象。这个结构遍历起来很方便，增删改字段也很直观。
基础示例：用 serializeArray 遍历表单数据
下面这个示例演示了 serializeArray() 的基本用法。页面上有两个输入框，点击按钮后用 $.each() 遍历序列化结果，把每个字段的名称和值拼出来显示在页面上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>serializeArray 基础示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form id="studentForm">
姓名：<input type="text" name="studentName" value="李明"><br><br>
学号：<input type="text" name="studentId" value="2026001"><br><br>
</form>
<button id="serializeArrayBtn">序列化并遍历表单数据</button>
<p id="outputArea" style="margin-top:10px;font-weight:bold;"></p>
<script>
$(document).ready(function(){
$("#serializeArrayBtn").click(function(){
var formData = $("#studentForm").serializeArray();
var resultText = "";
$.each(formData, function(index, field){
resultText += field.name + "：" + field.value + " | ";
});
$("#outputArea").text(resultText);
});
});
</script>
</body>
</html>
点击按钮后，页面上显示的内容类似：
studentName：李明 | studentId：2026001 |
这种遍历方式在做表单数据预览的时候特别顺手，用户可以直观地看到自己要提交了哪些数据。
serializeArray 和 serialize 怎么选
两个方法都是序列化表单数据，但适用场景不同：
-
拿到数据直接提交，不做任何二次处理 → 用
serialize()，产出字符串直接塞给 AJAX。 -
拿到数据后需要修改、过滤、补充字段 → 用
serializeArray()，产出数组操作灵活。
举个例子，提交前需要过滤掉空值并追加一个时间戳字段，用 serializeArray() 写起来就很顺：
var formData = $("#myForm").serializeArray();
// 过滤掉空值字段
formData = formData.filter(function(item){
return item.value.trim() !== "";
});
// 追加一个提交时间字段
formData.push({name: "submitTime", value: "2026"});
// 转回字符串再提交
var dataString = $.param(formData);
如果用 serialize() 产出的字符串来做这些操作，就得写正则或者手动解析键值对，代码量和出错概率都上去了。
serializeArray() 和 serialize() 共享同一套“成功控件”规则：控件必须有 name 属性、不能被 disabled、复选框和单选按钮要选中状态。两个方法的过滤逻辑一致，区别纯粹在于输出格式。
和 $.param() 配合使用的完整流程
serializeArray() 还有一个好搭档——$.param()。这个方法能把对象数组还原成 URL 编码字符串。所以完整的“取值→处理→提交”工作流可以这样走：
// 1. 序列化为对象数组
var arr = $("#myForm").serializeArray();
// 2. 对数组做业务处理（过滤、修改、新增）
arr.push({name: "token", value: "abc123"});
// 3. 转回字符串
var queryString = $.param(arr);
// 4. 提交
$.post("/api/submit", queryString);
我个人的习惯是，只要表单数据提交前需要做任何形式的预处理，就用 serializeArray() + $.param() 的组合。直接提交不动数据的时候才用 serialize()。这个习惯能避免很多因为字符串处理不当引发的小问题。
本节课程知识要点
-
serializeArray()返回的是对象数组，每个元素包含name和value属性，结构清晰便于遍历和处理。 -
和
serialize()一样，只处理“成功控件”，需满足name存在、非disabled、选中状态等条件。 -
适合提交前需要对表单数据做过滤、修改或追加字段的场景，比操作字符串要灵活得多。
-
配合
$.param()可以把处理后的数组还原为 URL 编码字符串，形成完整的“取→改→转→提”流程。 -
不能处理文件输入，涉及文件上传仍需使用
FormData。
serializeArray() 和 serialize() 是一对互补的方法，一个返回数组方便二次处理，一个返回字符串方便直接提交。把它们放在一起理解，就能根据具体需求灵活选择——不需要动数据用 serialize() 一步到位，需要调整数据用 serializeArray() 再加 $.param() 转换。表单数据序列化这个环节搞清楚了，前端数据提交的代码能简洁不少，维护起来也轻松。
