XMLHttpRequest & FormData 不提交数据

Question

我正在尝试使用 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。
Firefox、Safari 和 Chrome 在 MacOS 上；所有当前版本。

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，请。

Answer 1

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

Answer 2

发送 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);
};

XMLHttpRequest & FormData 不提交数据

XMLHttpRequest & FormData not submitting data

javascript

php

ajax

xmlhttprequest

form-data