XMLHttpRequestとFormDataがデータを送信していません

Question

postメソッドとFormDataオブジェクトを使用してajax経由でフォームを送信しようとしています。

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

フォームがあります：ここで

には、JavaScriptの簡易版である

• ボタン（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 & Chrome on MacOS;すべての現在のバージョン。自身から

ザ・は次のようになります。

<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オブジェクトを送信するときのコンテンツタイプは、urlがエンコードされていないmultipart/form-dataです。
さらに、ユーザーが行うことができない要求に対して適切な境界を設定する必要があります。この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

ボタンの名前を「更新」以外に変更して（form['update'].onclick...でも変更してください）。 PHPコードをトリガするためにFormDataに設定しようとしている値と衝突していると思います。