FormData
さんは XHR ユーザーの親友です。Chrome 50 でアップグレードされる予定です。FormData
オブジェクトの検査や、事後的な変更を可能にするメソッドを追加します。get()
、delete()
、および entries
、keys
などの反復ヘルパーを使用できるようになりました。(詳しくはこちらをご覧ください)。
FormData はシンプルなサポートが充実した API です。これを使用すると、仮想フォームをプログラムで作成し、window.fetch()
や XMLHttpRequest.send(formData)
を使用して離れた場所に送信することができます。
以下の例を続けてご覧ください。
プロ並みのフォーム解析
FormData
は実際の HTML フォームで作成し、現在のすべての値のスナップショットを取得します。しかし、物体は以前は完全に不透明でした。考えられることは、それを変更せずにサーバーに送信することだけです。これで、取り出し、修正、バップ、観察、圧縮、変更を行い、最後にアップロードできます。
function sendRequest(theFormElement) {
var formData = new FormData(theFormElement);
formData.delete("secret_user_data"); // don't include this one!
if (formData.has("include_favorite_color")) {
formData.set("color", userPrefs.getColor());
}
// log all values like <input name="widget">
console.info("User selected widgets", formData.getAll("widget"));
window.fetch(url, {method: 'POST', body: formData});
}
以前の XMLHttpRequest
を使用して FormData
を送信することもできます。
var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);
FormData を破棄しない
独自の FormData
をゼロから作成する場合、それらのフィールドに多くの時間を費やしてしまい、再利用できずに不満を感じているかもしれません。window.fetch()
メソッドと XMLHttpRequest.send()
メソッドの両方が FormData
のスナップショットを取得するため、処理を安全に再利用および変更できます。こちらの例をご覧ください。
// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");
// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});
// send reshare request
formData.set("action", "reshare"); // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});