Was ist der Unterschied zwischen "Payload anfordern" und "Formulardaten", wie auf der Registerkarte "Netzwerk" der Chrome Dev Tools angezeigt?

Ich habe eine alte Webanwendung, die ich unterstützen muss (die ich nicht geschrieben habe).

Wenn ich ein Formular ausfülle und abschicke und dann die Registerkarte "Netzwerk" in Chrome überprüfe, wird "Payload anfordern" angezeigt, wo normalerweise "Formulardaten" angezeigt werden. Was ist der Unterschied zwischen den beiden und wann würde einer anstelle des anderen gesendet werden?

Googelte dies, fand aber keine Informationen, die dies erklärten (nur Leute, die versuchten, Javascript-Apps dazu zu bringen, "Formulardaten" anstelle von "Nutzdaten anfordern" zu senden.

Die Anforderungsnutzlast - genauer gesagt: Nutzlastkörper einer HTTP-Anforderung - sind die Daten, die normalerweise von einer POST- oder PUT-Anforderung gesendet werden . Es ist der Teil nach den Headern und dem CRLFeiner HTTP-Anfrage .

Eine Anfrage mit Content-Type: application/jsonkönnte folgendermaßen aussehen:

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

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

Wenn Sie dies per AJAX einreichen, zeigt Ihnen der Browser einfach an, was er als Nutzlastkörper sendet. Das ist alles, was es tun kann, weil es keine Ahnung hat, woher die Daten kommen.

Wenn Sie ein HTML-Formular mit method="POST"und Content-Type: application/x-www-form-urlencodedoder einreichen, könnte Content-Type: multipart/form-dataIhre Anfrage folgendermaßen aussehen:

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

foo=bar&name=John

In diesem Fall sind die Formulardaten die Anforderungsnutzlast. Hier weiß der Browser mehr: Er weiß, dass der Balken der Wert des Eingabefelds foo des übermittelten Formulars ist. Und das zeigt es dir.

Sie unterscheiden sich Content-Typealso in der Art und Weise, wie Daten übermittelt werden. In beiden Fällen befinden sich die Daten im Nachrichtentext. Und Chrome unterscheidet, wie die Daten in den Entwicklertools angezeigt werden.

In Chrome wird eine Anfrage mit 'Content-Type: application / json' als Request PayedLoad angezeigt und sendet Daten als json-Objekt.

Die Anforderung mit 'Content-Type: application / x-www-form-urlencoded' zeigt jedoch Formulardaten an und sendet Daten als Schlüssel: Wert-Paar . Wenn Sie also ein Objektarray in einem Schlüssel haben , wird der Wert dieses Schlüssels abgeflacht:

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

sendet

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