使用FormData()获取表单数据失败而手动构造正常的原因是什么？

问题原因拆解 #

• 核心原因：未阻止表单提交的默认刷新行为
  你在表单onsubmit事件中绑定了return submitData(this)，但submitData函数执行完成后没有返回false，表单触发默认的提交刷新动作，刚打印到控制台的日志会随着页面刷新被清空，所以你看不到输出，误以为代码没有运行。
• 次要的语法不规范问题
  你的表单标签中，多个属性之间错误添加了逗号分隔，HTML标签的属性仅需要用空格分隔即可，多余的逗号虽然大部分浏览器会做容错处理，但属于不符合规范的写法，建议修正。

修复方案 #

1. 修正表单标签的属性语法，去掉多余逗号：

<form action="" method="post" onsubmit="return submitData(this)">
    First Name: <br>
    <input type="text" name="firstname"> <br>

    Last Name: <br>
    <input type="text" name="lastname"> <br>

    Age: <br>
    <input type="text" name="age"> <br>

    <input type="submit" id="buttonOne" value="Submit">
</form>

2. 修改submitData函数，最后添加return false阻止表单默认提交：

function submitData(fdata) {
    var formData = new FormData(fdata);

    for (var pair of formData.entries()) {
        console.log( pair[0] + ' - ' + pair[1] );
    }
    // 新增这行，阻止默认提交刷新
    return false;
}

修改完成后你在表单输入任意内容点击提交，即可在控制台看到对应的表单键值对输出。

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