Chrome開発ツールの[ネットワーク]タブに表示される「リクエストペイロード」と「フォームデータ」の違いは何ですか

私がサポートしなければならない古いWebアプリケーションがあります（私が作成しなかったものです）。

フォームに入力して送信すると、Chromeの[ネットワーク]タブを確認すると、通常は[フォームデータ]が表示される[リクエストペイロード]が表示されます。2つの違いは何ですか？一方が他方の代わりにいつ送信されるのですか？

これをグーグル化したが、これを説明する情報は実際には見つかりませんでした（「リクエストペイロード」の代わりに「フォームデータ」を送信するようにJavaScriptアプリを取得しようとしている人々だけです。

要求ペイロード-より正確には、HTTP要求のペイロード本体 -は、通常POSTまたはPUT要求によって送信されるデータです。これは、ヘッダと後の部分ですCRLFのHTTPリクエスト。

のリクエストは次のContent-Type: application/jsonようになります。

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

AJAXごとにこれを送信する場合、ブラウザはペイロードボディとして送信するものを表示するだけです。データの出所がわからないため、これですべてです。

を使用してHTMLフォームを送信した場合method="POST"、Content-Type: application/x-www-form-urlencodedまたはContent-Type: multipart/form-dataリクエストは次のようになります。

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

この場合、フォームデータはリクエストのペイロードです。ここで、ブラウザはより多くを認識します。barは送信されたフォームの入力フィールドfooの値であることを認識しています。そしてそれはあなたにそれが示していることです。

したがって、Content-Typeデータの送信方法は異なりますが、データの送信方法は異なります。どちらの場合も、データはメッセージ本文にあります。また、Chromeでは、デベロッパーツールでのデータの表示方法が区別されます。

Chromeでは、「Content-Type：application / json」を含むリクエストはRequest PayedLoadとして表示され、データをjsonオブジェクトとして送信します。

しかし、「Content-Type：application / x-www-form-urlencoded」 を使用したリクエストでは、フォームデータが表示され、データがKey：Value Pairとして送信されるため、1つのキーにオブジェクトの配列がある場合、そのキーの値はフラット化されます。

{ Id: 1, 
name:'john', 
phones:[{title:'home',number:111111,...},
        {title:'office',number:22222,...}]
}

送る

{ Id: 1, 
name:'john', 
phones:[object object]
phones:[object object]
}