В чем разница между «Запросить полезную нагрузку» и «Данные формы», как видно на вкладке «Сеть» инструментов разработчика Chrome

У меня есть старое веб-приложение, которое я должен поддерживать (которое я не написал).

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

Погуглил, но на самом деле не нашел никакой информации, объясняющей это (просто люди, пытающиеся заставить приложения 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 показывает данные формы и отправляет данные в виде пары ключ: значение , поэтому, если у вас есть массив объектов в одном ключе, он отображает значение этого ключа:

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

посылает

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