☰

フェッチ API を使用してフォームデータを投稿するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript ajax fetch-api
フェッチ API を使用してフォームデータを投稿するにはどうすればよいですか? 質問する

私のコード:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

fetch API を使用してフォームを投稿しようとしましたが、送信される本文は次のようになります。

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

[email protected]
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(なぜ送信するたびに境界の数字が変わるのかは分かりませんが…)

「Content-Type」が「application/x-www-form-urlencoded」のデータを送信したいのですが、どうすればよいでしょうか? または、対処する必要がある場合は、コントローラーでデータをどのようにデコードすればよいでしょうか?

私の質問に答えてくれる人に対して、私は次のように答えることができると知っています:

fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

私が欲しいのは、jQuery の $("#form").serialize() のようなもの (jQuery を使用せずに)、またはコントローラーで mulitpart/form-data をデコードする方法です。ご回答ありがとうございます。

ベストアンサー1

引用するMDNオンFormData（強調は筆者による）：

このFormDataインターフェースは、フォーム フィールドとその値を表すキー/値のペアのセットを簡単に構築する方法を提供します。このペアは、XMLHttpRequest.send()メソッドを使用して簡単に送信できます。エンコーディング タイプが に設定されている場合、フォームで使用されるのと同じ形式を使用します"multipart/form-data"。

したがって、 を使用すると、FormDataにロックされます。オブジェクトを本体として送信し、形式でデータを送信しないmultipart/form-data方法はありません。FormDatamultipart/form-data

データをそのまま送信したい場合は、application/x-www-form-urlencoded本文をURLエンコードされた文字列として指定するか、URLSearchParamsオブジェクトです。残念ながら後者は要素から直接初期化することはできません。フォーム要素を自分formで反復処理したくない場合は（HTMLFormElement.elementsURLSearchParams)、オブジェクトからオブジェクトを作成することもできますFormData。

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

ヘッダーを自分で指定する必要はないことに注意してくださいContent-Type。

次のように指摘されている。僧侶の時間コメントでは、ループ内で値を追加する代わりに、オブジェクトを直接作成しURLSearchParamsて渡すこともできます。FormData

const data = new URLSearchParams(new FormData(formElement));

ただし、これはブラウザではまだ実験的なサポートしかないため、使用する前に必ず適切にテストしてください。

おすすめ記事