私は自分がサポートしなければならない古いWebアプリケーションを持っています(私はこれを書きませんでした)。
フォームに記入して送信すると、Chromeの[ネットワーク]タブにチェックが入り、通常は[フォームデータ]と表示される[ペイロードの要求]が表示されます。両者の違いは何ですか?一方が他方の代わりに送信されるのはいつですか?
これをグーグルしたが、これを説明する情報は実際には見つからなかった(単に「ペイロード要求」ではなく「フォームデータ」をJavaScriptアプリに送信させようとしている人々だけ)。
リクエストペイロード - 正確には 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は、開発者ツールでデータがどのように表示されるかを区別します。
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]
}