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

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

Fetch API の FormData インターフェイスを使用してフォーム データを投稿する場合、そのデフォルトの動作を理解することが重要です。デフォルトでは、「multipart/form-data」形式を使用してデータが送信されますが、この形式は「application/x-www-form-urlencoded」形式とは互換性がありません。

フォーム データを次のように送信したい場合Fetch API を使用して "application/x-www-form-urlencoded" を実行するには、次の手順に従います:

1. FormData を URLSearchParams に変換します: ループを使用して反復処理します。 FormData オブジェクトを作成し、各キーと値のペアを URLSearchParams オブジェクトに追加します。

   <code class="javascript">const data = new URLSearchParams();
   for (const pair of new FormData(formElement)) {
       data.append(pair[0], pair[1]);
   }</code>

   ログイン後にコピー

   OR、実験的な方法を使用します:

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

   ログイン後にコピー

   注:ブラウザは後者のメソッドを使用する前にサポートしています。

2. Fetch API を使用してデータを送信する: 本体を URLSearchParams オブジェクトに設定して POST リクエストを作成します。デフォルトは「application/x-www-form-urlencoded」となるため、Content-Type ヘッダーは指定しないでください。

   <code class="javascript">fetch(url, {
       method: 'post',
       body: data,
   })
   .then(…);</code>

   ログイン後にコピー

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