¿Cuál es la diferencia entre "Solicitar carga útil" frente a "Datos de formulario" como se ve en la pestaña Red de herramientas de desarrollo de Chrome

Tengo una aplicación web antigua que debo admitir (que no escribí).

Cuando complete un formulario y lo envíe, verifique la pestaña "Red" en Chrome. Veo "Solicitar carga útil", donde normalmente vería "Datos del formulario". ¿Cuál es la diferencia entre los dos y cuándo se enviaría uno en lugar del otro?

Busqué en Google esto, pero realmente no encontré ninguna información que lo explicara (solo las personas que intentaban obtener aplicaciones de JavaScript para enviar "Datos de formulario" en lugar de "Solicitar carga útil".

La carga útil de la solicitud, o para ser más precisos: cuerpo de la carga útil de una solicitud HTTP , son los datos que normalmente se envían mediante una solicitud POST o PUT . Es la parte después de los encabezados y el CRLFde una petición HTTP .

Una solicitud con Content-Type: application/jsonpuede verse así:

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

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

Si envía esto por AJAX, el navegador simplemente le muestra lo que está enviando como cuerpo de carga útil. Eso es todo lo que puede hacer porque no tiene idea de dónde provienen los datos.

Si envía un formulario HTML con method="POST"y Content-Type: application/x-www-form-urlencodedo Content-Type: multipart/form-datasu solicitud puede tener este aspecto:

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

foo=bar&name=John

En este caso, los datos del formulario son la carga útil de la solicitud. Aquí el navegador sabe más: sabe que la barra es el valor del campo de entrada foo del formulario enviado. Y eso es lo que te está mostrando.

Por lo tanto, difieren en Content-Typela forma en que se envían los datos, pero no en la misma. En ambos casos, los datos están en el cuerpo del mensaje. Y Chrome distingue cómo se le presentan los datos en las Herramientas para desarrolladores.

En Chrome, la solicitud con 'Content-Type: application / json' se muestra como Request PayedLoad y envía datos como objeto json.

Pero la solicitud con 'Content-Type: application / x-www-form-urlencoded' muestra los datos del formulario y envía los datos como Key: Value Pair , por lo que si tiene una matriz de objetos en una clave , el valor de esa clave se aplana:

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

envía

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