XMLHttpRequest &FormData 未提交数据

2022-01-15 00:00:00 xmlhttprequest php javascript ajax form-data

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

I am trying to submit a form via ajax using the post method and a FormData object.

这是 JavaScript 的简化版本:

Here is a simplified version of the 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 脚本有以下内容:

My PHP script has the following:

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

//  more stuff

print 'other stuff';

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

When I try it, the PHP falls through to the rest of the code, and I get the other output, rather than what I expect from the print_r statement.

我尝试了以下变体:

  • new FormData()(没有表单).如果我手动添加 update 数据，这确实工作.
  • 新的 FormData(form).这不起作用，无论我是否手动添加 update.
  • 将表单方法更改为post.
  • Firefox、Safari 和MacOS 上的 Chrome；所有当前版本.
  • new FormData() (without the form). This does work if I add the update data manually.
  • new FormData(form). This does not work, whether I add the update manually or not.
  • changing the form method to post.
  • Firefox, Safari & Chrome on MacOS; all current versions.

from 本身看起来像这样:

The from itself looks something like this:

<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>

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

What should I do to submit the get this to work?

请不要使用 jQuery.

No jQuery, please.

推荐答案

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

The content type when sending a FormData object is multipart/form-data not url encoded.
Further more the proper boundary must be set for the request, which the user is unable to do. For this XMLHttpRequest sets the correct content type with the required boundary.
So all you have to do is not set the content type and it'll work.

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

相关文章