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

Fetch API を使用したフォーム データの送信

Fetch API を使用したフォーム データの送信には、本質的にマルチパート/フォームデータ形式を使用する
FormData が利用されます。 「Content-Type」:「application/x-www-form-urlencoded」を使用してデータを送信しようとする場合、次の 2 つのオプションがあります:

URL エンコードされた本文の作成:

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

URLSearchParams の使用:

フォーム要素から URLSearchParams オブジェクトを構築するには、要素を反復処理するか、次の変換メソッドを使用できます:

<code class="js">const data = new URLSearchParams(new FormData(formElement));
fetch("api/xxx", {
    method: 'post',
    body: data,
})</code>

URLSearchParams を使用する場合、Content-Type ヘッダーの定義は不要であることに注意してください。

コントローラーでの Multipart/Form-Data のデコード:

バックエンドの実装では、multipart/form-data 本体のデコードが必要になる場合があります。特定のデコード手順については、目的のフレームワークのドキュメントを参照してください。

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