web-dev-qa-db-ja.com

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

私は自分がサポートしなければならない古いWebアプリケーションを持っています（私はこれを書きませんでした）。

フォームに記入して送信すると、Chromeの[ネットワーク]タブにチェックが入り、通常は[フォームデータ]と表示される[ペイロードの要求]が表示されます。両者の違いは何ですか？一方が他方の代わりに送信されるのはいつですか？

これをグーグルしたが、これを説明する情報は実際には見つからなかった（単に「ペイロード要求」ではなく「フォームデータ」をJavaScriptアプリに送信させようとしている人々だけ）。

formshttprestpostgoogle-chrome-devtools
203
red888

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

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

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

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

これをAJAXごとに送信すると、ブラウザは単純にペイロード本文として送信しているものを表示します。データがどこから来ているのかわからないので、できることはそれだけです。

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

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

foo=bar&name=John

この場合、フォームデータはリクエストペイロードです。ここでブラウザはもっと知っています：それはbarが送信されたフォームの入力フィールドfooの値であることを知っています。それがあなたに見せているものです。

そのため、Content-Typeは異なりますが、データの送信方法は異なります。どちらの場合も、データはメッセージ本体にあります。そしてChromeは、開発者ツールでデータがどのように表示されるかを区別します。

226
lefloh

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

しかし、 'Content-Type：application/x-www-form-urlencoded' を指定して要求すると、フォームデータが表示され、 Key：Value Pair としてデータが送信されます。 それはフラット /そのキーの値：

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

送る

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