Fetch API を使用してフォーム データを「application/x-www-form-urlencoded」として送信するにはどうすればよいですか?

Application/x-www-form-urlencoded を使用した Fetch API によるフォーム データの投稿

フォームを送信するときに、フォーム データを送信する方法について疑問が生じることがあります。 Fetch API を使用してデータを取得します。デフォルトでは、FormData を使用して本文を送信すると、データは multipart/form-data として送信されます。ただし、データを application/x-www-form-urlencoded として送信する場合は、いくつかのオプションが利用可能です。

Multipart/Form-Data 形式の FormData

FormData の使用データを multipart/form-data 形式で送信するように自動的にロックされます。これを回避するには、FormData を使用するのではなく、URL エンコードされた文字列または URLSearchParams オブジェクトを手動で作成します。以下は、フォーム要素を反復処理して URLSearchParams オブジェクトを構築するコード スニペットです:

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 ヘッダーを明示的に指定する必要はありません。

FormData を使用した URLSearchParams

もう 1 つの実験的なオプションは、URLSearchParams オブジェクトを作成し、値をループするのではなく、FormData オブジェクトを直接渡します:

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

このメソッドはブラウザーで実験的にサポートされていますが、使用する前に徹底的にテストすることをお勧めします。

以上がFetch API を使用してフォーム データを「application/x-www-form-urlencoded」として送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。