XMLHttpRequest和FormData不提交数据 [英] XMLHttpRequest & FormData not submitting 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"
- a button (
type="button" name="update"
) to run the script - no
action
andmethod="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 fall 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
数据,此确实有效. -
new FormData(form)
.无论我是否手动添加update
,这都行不通. - 将表单方法更改为
post
. - Firefox,Safari和amp; Chrome在MacOS上;所有当前版本.
new FormData()
(without the form). This does work if I add theupdate
data manually.new FormData(form)
. This does not work, whether I add theupdate
manually or not.- changing the form method to
post
. - Firefox, Safari & Chrome on MacOS; all current versions.
其本身看起来像这样:
<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 set 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);
};
这篇关于XMLHttpRequest和FormData不提交数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!