form_html/css_WEB-ITnose送信時のエンコードタイプenctypeの詳細説明

昔、フロントエンドという概念がなかった頃、私はフォーム送信を書く際に、action 属性に対象の URL を記述し、あとはブラウザに任せていました。 ~ しかし今では、データの送信に Ajax を使用することが多くなり、この原始的な方法はグレースフル デグラデーションの産物としてのみ見なされています。

フォームを非同期で送信するときは、フォームデータのエンコードに少し注意する必要があります。コールバック関数を作成するときに、要求された Content-Type に基づいてさまざまなビジネス ロジックを作成した経験があることを思い出してください。この Content-Type とフォームのエンコーディングの間には関連性がありますか?フロントエンドが既にデータをバックエンドに送信しているにもかかわらず、バックエンド パートナーがデータを取得できない状況はありますか?これらの複雑な問題の背後にある理由について、私は長い間本当に悩まされてきました。今日はこの記事でわかりやすく説明します。

フォームのエンコーディングは何によって決まりますか?

フォーム要素

に詳しい人は、フォームがサーバーに送信されるときにフォーム データをエンコードするためのコンテンツ タイプ (コンテンツ タイプ) を指定する属性 enctype に精通しているでしょう。次の引用は、HTML 4.01 仕様のフォームの章からの引用です:

enctype = content-type [CI]

この属性は、フォームをサーバーに送信するために使用されるコンテンツ タイプを指定します

content type?これは、コールバック関数で返されるデータのタイプとリクエストヘッダーの内容を決定するために使用するものではないでしょうか? ！それは正しい！それでおしまい！ HTML 4.01 仕様の基本データ型の説明によれば、このコンテンツ タイプ は接続リソース の属性を指定するものであり、MIME タイプのメディア タイプでもあります。

フォームエンコーディングタイプ

フォームエンコーディングはenctypeによって決定されることはわかっていますが、オプションの値はいくつあるでしょうか?すべての MIME タイプで機能しますか?

実際、HTML5 仕様によれば、enctype には次の 3 つのオプションがあり、最後の text/plain は 4.01 と比較して新しいオプションです。

• application/x-www-form-urlencoded

• multipart/form-data

• text/plain

application/x-www-form-urlencoded

これは デフォルトのエンコーディングですtype を使用すると、フォーム データ内の英数字以外の文字が「%HH」などのエスケープ文字に変換され、この形式に結合されるため、バックエンドはその後データをフェッチします。 、デコードされます。

注:

• フォームにファイルがある場合は、ファイル名のみが残ります。

multipart/form-data

このタイプは、ファイル、非 ASCII データ、および を効率的に転送するために使用されます。バイナリデータ。データは、指定された区切り文字を使用して項目ごとに分割されます。各パートには、フォーム項目のキー名とその他の情報を指定する Content-Disposition ヘッダーがあり、各パートにはオプションの Content-Type (指定されていない場合は text/plain) があります。以下は、multipart/form-data エンコーディング タイプの使用例です:

Content-Type: multipart/form-data; boundary=AaB03x   --AaB03x   Content-Disposition: form-data; name="submit-name"   Larry   --AaB03x   Content-Disposition: form-data; name="files"; filename="file1.txt"   Content-Type: text/plain   ... contents of file1.txt ...       --AaB03x--

注:

• 一般的に言えば、method と enctype は互いに影響を及ぼさない 2 つの異なる属性ですが、ファイルを転送する場合、method はそれを行う必要があります。 POST として指定する必要があります。そうでない場合、ファイルにはファイル名のみが含まれます。ファイルが送信されない場合、enctype はデフォルトの application/x-www-form-urlencoded に戻ります。

• text/plain

エスケープせずに、キーと値のペア key1=value1rnkey2=value2 に従ってフォーム データを配置します。

注:

フォームにファイルがある場合は、ファイル名のみを残します

• application/json およびその他の MIME タイプ

さらに、フォーム データのエンコード タイプも指定する必要があります。 application/json は、W3C Abandoned によって承認されています (詳細については、「HTML JSON フォームの送信」を参照)。使用されている場合でも、 では使用しないことをお勧めします。ブラウザはこれをサポートしていないため、application/x-www-form-urlencoded に置き換えられます。

同様に、他の MIME タイプはサポートされておらず、デフォルトのエンコーディング application/x-www-form-urlencoded に置き換えられます。

追記: 現在、これをサポートしているブラウザはないようです。私は最初に次のブラウザを使用しました:

FF43: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox /43.0

• Chrome49、Safari9.1: Mozilla/5.0 (Macintosh; Intel Mac OS ラボテスト IE をお試しください~

  )

  追記

  つまり、enctypeはフォームデータのコンテンツタイプ(MIMEタイプ)と考えることができますが、その値は上記の3つ以外では使用できず、それ以外の場合はデフォルトのエンコーディングに変換されます。

  今日は、フォーム送信時のエンコードタイプ enctype と、コンテンツタイプおよび MIME タイプとの関係についての説明を終了しました。次回はAjaxの送信フォームの種類についてまとめてみましょう。