javascript - FormData() 对象不添加来自表单的提交类型输入，而在 Firefox 上

Question

今天我遇到了一个有趣的错误，花了很长时间才弄清楚。

设置

页面上的表单。提交时，数据会被捕获并使用它创建 new FormData() 对象。

该对象通过 xhr 请求发送到 .php 脚本，然后返回 ok/error 消息。

代码看起来像这样:(简化版本，不需要绒毛)

<form name="frm" id="frm" action="" method="post" onsubmit="save(event, this);" enctype="multipart/form-data">
    <input name="name" id="name" type="text" value="..." />
    <input name="email" id="email" type="text" value="..." />
    <input name="phone" id="phone" type="text" value="..." />
    <input name="website" id="website" type="text" value="..." />
    <textarea name="details" id="details"></textarea>
    <input name="send" type="submit" value="Send" />
</form>

<script type="text/javascript">

function save(e, frm) {

        if (document.getElementById('nume').value == '' ||
          document.getElementById('email').value == '' ||
          document.getElementById('telefon').value == '' ||
          document.getElementById('site').value == '') {

            alert('Forms empty');

        } else {

            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {

                    var r = JSON.parse(xhr.responseText);

                    if (r.code == 0) {
                        document.getElementById('message_ok').style.display = 'block';
                    } else {
                        document.getElementById('message_err').style.display = 'block';
                    }
                }
            };

            xhr.open('POST', 'http://url', true);
            var data = new FormData(frm);
            xhr.send(data);

        }
    e.preventDefault();
}

</script>

将其发送到 .php 将生成一个如下所示的数组:

Array
(
    [name] => some name
    [email] => some email
    [phone] => 11111111
    [website] => some site
    [details] => some details
    [send] => Send
)

和 .php 将响应 {"message":"ok","code":0} 或 {"message":"error ","code":1}

现在这是预期的行为。这是我在 Chrome、IE 或 Safari 上得到的结果。

问题

但是，在 Firefox 上，除了没有 submit 输入 (name="send") 键/值对外，我得到了相同的数组:

Array
(
    [name] => some name
    [email] => some email
    [phone] => 11111111
    [website] => some site
    [details] => some details
)

我在 Linux 和 Windows 上都尝试过，以覆盖我的基础，但它仍然给出了同样令人不满意的结果。

解决方案

在线搜索并一无所获后，我解决它的方法(更多的是修补，而不是真正解决)是覆盖发送键/值:

var data = new FormData(frm);
data.append('send', 'Send');
xhr.send(data);

这是有效的，因为如果它已经被定义(Chrome 等...)它会被覆盖，如果它不存在，它会被创建。

问题

1. 相似 - 你遇到过相似的事情吗？
2. 修复 - 我认为我的解决方案是 hack，你有更好的修复方法吗？

Answer 1

根据 WHATWG 规范，FireFox 似乎是正确的。

FormData 的XMLHttpRequest 规范构造函数说:

2. If form is given, set fd's entries to the result of constructing the form data set for form.

然后在构造表单数据集的描述中说:

The algorithm to construct the form data set for a form form optionally in the context of a submitter submitter is as follows. If not specified otherwise, submitter is null.

表单中的按钮只有在它是提交者时才会包含在表单数据集中。但是当从 FormData 构造函数执行此算法时，没有指定提交者，因此表单数据集中不应包含任何按钮。