FormData 构造函数在 Edge 中丢失 textarea 值答案

【问题标题】：FormData constructor loses textarea value in EdgeFormData 构造函数在 Edge 中丢失 textarea 值
【发布时间】：2018-10-10 09:22:19
【问题描述】：

我有一个文本区域：

<textarea cols="20" id="testtextbox" name="testtextbox" rows="2">test</textarea>

我通过构建一个 FormData 对象来发布它：

var newForm = $('<form></form>').append($("#testtextbox"))
var formdata = new FormData(newForm.get(0));

var xhr = new XMLHttpRequest();
xhr.open('POST', '/', true);
xhr.send(formdata);

JSFiddle here

我希望这会发布适用于 Chrome 和 Firefox 的那个文本区域的值。但是，在 Edge 42.17134 上，POST 请求正文是：

-----------------------------7e2203930476
Content-Disposition: form-data; name="testtextbox"
 
 
-----------------------------7e2203930476--

这在以前版本的 Edge 中也可以正常工作。难道我做错了什么？据我所知，我不依赖任何已弃用的功能。

【问题讨论】：

标签： javascript xmlhttprequest microsoft-edge form-data

【解决方案1】：

根据您的描述和代码，我建议您可以查看the official API about formdata，并按照以下两种方式修改您的代码。

1.使用formdata.append发布值

<textarea cols="20" id="testtextbox" name="testtextbox" rows="2">test</textarea>
<script type="text/javascript">
   var formdata = new FormData();
   formdata.append("testtextbox", testtextbox.value);
   var xhr = new XMLHttpRequest();
   xhr.open('POST', '/', true);
   xhr.send(formdata);
</script>

结果：the first way

2.在页面正文中添加表单

<form id="form1" name="form1">
    <textarea cols="20" id="testtextbox" name="testtextbox" rows="2">test</textarea>
</form>
<script type="text/javascript">
    $(function () {
        var newForm = $("#form1");
        var formdata = new FormData(newForm.get(0)); 

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/', true);
        xhr.send(formdata);
    })
</script>

结果：the second way

最好的问候，

詹妮弗

【讨论】：

1的问题是我需要浏览器对输入的智能解析。而且我不能只在正文中添加一个表单元素，因为我正在从整个页面收集多个输入。
我已经在几个浏览器中进行了测试，我确实看到 Edge 可能会失去价值。我认为代码没有错。在我看来，Edge 中的具体情况可能只是版本“隐藏”了值或者它是一个小错误。