Какая разница между "Запросить полезную нагрузку" и "Данные формы", как показано на вкладке "Инструменты разработчика Chrome".

Ответ 1

Полезная нагрузка запроса - или, если быть более точным: тело полезной нагрузки 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 отличает, как данные представлены вам в Инструментах разработчика.

Ответ 2

В 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]
}