検査と変更のための FormData メソッド

Sam Thorogood

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