Qual é a diferença entre "Solicitar carga útil" e "Formulário de dados", como visto na guia Rede do Chrome Dev Tools

Eu tenho um aplicativo Web antigo que tenho que suportar (o qual não escrevi).

Ao preencher um formulário e enviar, em seguida, verifique a guia "Rede" no Chrome e vejo "Solicitar carga útil", onde normalmente veria "Dados do formulário". Qual é a diferença entre os dois e quando um seria enviado em vez do outro?

Pesquisei isso no Google, mas realmente não encontrei nenhuma informação que explica isso (apenas pessoas tentando obter aplicativos javascript para enviar "Dados do formulário" em vez de "Solicitar carga útil".

A carga útil da solicitação - ou, para ser mais preciso: o corpo da carga útil de uma solicitação HTTP - são os dados normalmente enviados por uma solicitação POST ou PUT . É a parte após os cabeçalhos e o CRLFde uma solicitação HTTP .

Uma solicitação com Content-Type: application/jsonpode ser assim:

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

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

Se você enviar isso por AJAX, o navegador simplesmente mostra o que está sendo enviado como corpo de carga. É tudo o que pode fazer, porque não tem ideia de onde os dados vêm.

Se você enviar um formulário HTML com method="POST"e Content-Type: application/x-www-form-urlencodedou Content-Type: multipart/form-datasua solicitação for semelhante a esta:

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

foo=bar&name=John

Nesse caso, os dados do formulário são a carga útil da solicitação. Aqui, o Navegador sabe mais: sabe que bar é o valor do campo de entrada do formulário enviado. E é isso que está mostrando a você.

Portanto, eles diferem na Content-Typeforma como os dados são enviados. Nos dois casos, os dados estão no corpo da mensagem. E o Chrome distingue como os dados são apresentados a você nas Ferramentas do desenvolvedor.

No Chrome, a solicitação com 'Content-Type: application / json' é exibida como Request PayedLoad e envia dados como objeto json.

Mas a solicitação com 'Content-Type: application / x-www-form-urlencoded' mostra Dados do formulário e envia os dados como Chave: par de valores , portanto, se você tiver uma matriz de objeto em uma chave, ela altera o valor dessa chave:

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

envia

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