Fetch API を使用してフォーム データをさまざまな形式で送信するにはどうすればよいですか?

Fetch API を使用したフォーム データの投稿

Fetch API を利用してフォーム データを送信する場合、考慮すべき主な形式が 2 つあります。

Multipart/ Form-Data

FormData を使用してリクエスト本文を構築する場合、データは自動的に multipart/form-data 形式で送信されます。これは FormData のデフォルトの動作であり、変更できません。

Application/x-www-form-urlencoded

application/x-www-form-urlencoded 形式でデータを送信するには、次のようにします。いくつかのオプションがあります:

1. URL エンコードされた文字列:

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

2. URLSearchParams オブジェクト:

<code class="javascript">const data = new URLSearchParams();
data.append("email", "example@email.com");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>

URLSearchParams を使用する場合、正しいコンテンツ タイプが自動的に設定されるため、Content-Type ヘッダーを指定する必要はないことに注意してください。

3. FormData からの URLSearchParams:

<code class="javascript">const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});</code>

このオプションを使用すると、FormData オブジェクトを直接渡して URLSearchParams オブジェクトを作成できます。ただし、ブラウザのサポートが制限されている場合があるため、使用する前に必ず十分にテストしてください。

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