XMLHttpRequest & FormData 未提交数据答案

【问题标题】：XMLHttpRequest & FormData not submitting dataXMLHttpRequest & FormData 未提交数据
【发布时间】：2017-12-22 17:01:54
【问题描述】：

我正在尝试使用 post 方法和 FormData 对象通过 ajax 提交表单。

这是 JavaScript 的简化版本：

var form=…; //  form element
var url=…;  //  action
form['update'].onclick=function(event) {    //  button name="update"
    var xhr=new XMLHttpRequest();
        xhr.open('post',url,true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var formData=new FormData(form);
        formData.append('update', true);    // makes no difference
    xhr.send(formData);
    xhr.onload=function() {
        alert(this.response);
    };
};

表格有：

一个按钮 (type="button" name="update") 来运行脚本
没有action 和method="get"

我的 PHP 脚本有以下内容：

if(isset($_POST['update'])) {
    print_r($_POST);
    exit;
}

//  more stuff

print 'other stuff';

当我尝试它时，PHP 会进入其余代码，然后我得到另一个输出，而不是我对 print_r 语句的期望。

我尝试了以下变体：

new FormData()（没有表格）。如果我手动添加 update 数据，这确实有效。
new FormData(form)。这不起作用，无论我是否手动添加update。
将表单方法更改为post。
MacOS 上的 Firefox、Safari 和 Chrome；所有当前版本。

from 本身看起来像这样：

<form id="edit" method="post" action="">
    <p><label for="edit-summary">Summary</label><input id="edit-summary" name="summary" type="text"></p>
    <p><label for="edit-description">Description</label><input id="edit-description" name="description" type="text"></p>
    <p><label for="edit-ref">Reference</label><input id="edit-ref" name="ref" type="text"></p>
    <p><label for="edit-location">Location</label><input id="edit-location" name="location" type="text"></p>
    <p><button type="button" name="update">OK</button></p>
</form>

我应该怎么做才能提交让它工作？

请不要使用 jQuery。

【问题讨论】：

你的表单 HTML 是什么样的？
@E.Sundin 查看问题的编辑版本……

标签： javascript php ajax xmlhttprequest form-data

【解决方案1】：

发送 FormData 对象时的内容类型是 multipart/form-data 不是 url 编码的。
此外，必须为请求设置适当的边界，这是用户无法做到的。为此 XMLHttpRequest 设置具有所需边界的正确内容类型。
因此，您所要做的就是不设置内容类型，它会起作用。

var xhr=new XMLHttpRequest();
xhr.open('post',url,true);
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");<--don't do this
var formData=new FormData(form);
formData.append('update', true);    // makes no difference
xhr.send(formData);
xhr.onload=function() {
    alert(this.response);
};

【讨论】：

感谢您的回答。删除那条线肯定可以正常工作。老实说，我不记得我最初是从哪里得到那条线的。
只是为了后代，我认为xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 将用于发送来自FormData 对象的非 POST 数据。
@Manngo 是否有一些与规范相关的来源声明“通过 XMLHttpRequest 发送 FormData 时，使用 multipart/form-data”？（听起来很明显的措辞，但仍然）

【解决方案2】：

将按钮的名称更改为“更新”以外的名称（并在您的form['update'].onclick... 中也进行更改）。我认为它与您尝试在 FormData 上设置以触发 PHP 代码的值发生冲突。

【讨论】：