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＆amp; MacOS上的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。

Answer 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);
};

Answer 2

将按钮名称更改为“更新”以外的其他名称（并在datevalue()中更改）。我认为它与您尝试在FormData上设置的值发生冲突，以触发PHP代码。

XMLHttpRequest＆amp; FormData未提交数据

2 个答案: