Fetch API を使用してフォーム データを送信する方法: Multipart/form-data と Application/x-www-form-urlencoded?

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

バックグラウンド

Fetch API を使用してフォーム データを送信するときに、よく発生する問題データのエンコード時に使用される Content-Type と境界に関連する問題。この記事では、これらの問題の性質を調査し、multipart/form-data と application/x-www-form-urlencoded をエンコードするための解決策を提供します。

FormData および multipart/form-data

MDN の FormData ドキュメントで説明されているように、FormData はデータをマルチパート/フォームデータ形式で暗黙的にエンコードします。この形式は、Content-Type が application/x-www-form-urlencoded のデータの送信には適していません。

application/x-www-form-urlencoded のソリューション

application/x-www-form-urlencoded 形式でデータをエンコードするには、2 つのオプションがあります:

1. 文字列エンコード: フォーム データを URL エンコードされた形式に手動でエンコードします。 string.
2. URLSearchParams: URLSearchParams オブジェクトを初期化し、各フォーム フィールドの名前と値をそれに追加します。ブラウザーは URLSearchParams オブジェクトから Content-Type ヘッダーを推測するため、Content-Type ヘッダーを明示的に指定することは避けてください。

URLSearchParams の代替

実験的なサポートが利用可能な場合は、値を手動で追加する代わりに、FormData オブジェクトを URLSearchParams に直接渡すこともできます。このアプローチはまだ開発中であるため、実装前に徹底的にテストする必要があります。

結論

FormData の仕組みと Fetch API の動作を理解することで、開発者はフォームを送信できるようになります。データを multipart/form-data または application/x-www-form-urlencoded 形式で正しく保存し、サーバー側での適切なデータ転送と処理を保証します。

以上がFetch API を使用してフォーム データを送信する方法: Multipart/form-data と Application/x-www-form-urlencoded?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。