XMLHttpRequest＆FormData不提交数据

我想通过使用post方法和FormData对象通过ajax提交表单。XMLHttpRequest＆FormData不提交数据

这里是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 & MacOS上的Chrome;所有当前版本。

的从本身看起来是这样的：

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

来源

2017-07-18 Manngo

你的表单HTML是什么样的？ –

@ E.Sundin请参阅编辑版本的问题... – Manngo

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

来源

2017-07-19 15:29:14 Musa

感谢您的回答。删除该行肯定有效。说实话，我不记得我在哪里得到那条线。 – Manngo

只是为了后代，我认为''''''''发送POST数据时，将使用'xhr.setRequestHeader（“Content-type”，“application/x-www-form-urlencoded”）;''''不会从'FormData'对象。 – Manngo

@Manngo是否有一些规范相关的来源指出“通过XMLHttpRequest发送FormData，使用'multipart/form-data'”？（听起来很明显，但仍然如此） – Xenos

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

来源

2017-07-18 02:37:33 RichGoldMD

XMLHttpRequest＆FormData不提交数据

回答

相关问题