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不提交數據

回答

相關問題