new FormData传入合法表单元素返回空对象问题求解

FormData是特殊的迭代器对象，大部分浏览器的控制台直接打印console.log(formData)时默认不会展开显示内部的键值对，会被误判为空对象，这不是真的没有数据。

验证FormData是否真的有数据的方法 #

在new FormData(form)之后添加以下代码即可看到所有收集到的内容：

// 遍历所有键值对
for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

// 单独获取指定字段的值
console.log(formData.get('first')); // 打印first输入框的值
console.log(formData.get('operator')); // 打印选中的运算符值

FormData正确收集表单数据的必要条件 #

除了表单结构合法外，需要满足以下要求：

• 所有需要提交的表单控件（input/select/textarea等）必须设置非空的name属性，id属性仅用于label关联，和FormData收集逻辑无关，无name的控件会被直接忽略
• 控件不能设置disabled属性，禁用状态的控件不会被收集
• 单选框、复选框只有处于选中状态时才会被收集，未选中的不会出现在FormData中
• 控件要么放在<form>标签内部，要么显式设置form属性关联到目标表单的id
• 文件输入控件如果未选择文件，也不会出现在FormData中

场景适配建议 #

你提供的HTML代码中所有控件都已设置正确的name属性，也都放在form标签内部，大概率是控制台打印的认知误区。按上面的验证方法确认有值之后，直接传给fetch的body参数即可正常发送，不需要额外设置Content-Type请求头，浏览器会自动识别FormData对象并设置正确的请求头和边界值。如果你封装的getData函数中手动设置了Content-Type头，请删除对应配置避免请求解析失败。

内容的提问来源于stack exchange，提问作者bobweirsmoustache