Worin besteht der Unterschied zwischen "Nutzdaten anfordern" und "Formulardaten" in der Registerkarte "Netzwerk" von Chrome dev tools
Ich habe eine alte Webanwendung, die ich unterstützen muss (die ich nicht geschrieben habe).
Wenn ich ein Formular ausfülle und abschicke, überprüfe ich die Registerkarte "Netzwerk" in Chrome Ich sehe "Nutzdaten anfordern", wo ich normalerweise "Formulardaten" sehe. Was ist der Unterschied zwischen den beiden und wann würde einer anstelle des anderen gesendet werden?
Ich habe das gegoogelt, aber keine Informationen gefunden, die dies erklären (nur Leute, die versuchen, Javascript-Apps dazu zu bringen, "Formulardaten" anstelle von "Nutzdaten anfordern" zu senden.
Die Anforderungsnutzlast - oder genauer gesagt: Nutzlastkörper einer HTTP-Anforderung - sind die Daten, die normalerweise durch POST- oder PUT-Anforderung gesendet werden. Es ist der Teil nach den Headern und dem CRLF eines HTTP Request .
Eine Anfrage mit Content-Type: application/json könnte so aussehen:
POST /some-path HTTP/1.1
Content-Type: application/json
{ "foo" : "bar", "name" : "John" }
Wenn Sie dies per AJAX übermitteln, zeigt Ihnen der Browser einfach, was er als Nutzlastkörper übermittelt. Das ist alles, was es tun kann, da es keine Ahnung hat, woher die Daten stammen.
Wenn Sie ein HTML-Formular mit method="POST" und Content-Type: application/x-www-form-urlencoded oder Content-Type: multipart/form-data einreichen, sieht Ihre Anfrage möglicherweise so aus:
POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded
foo=bar&name=John
In diesem Fall sind die Formulardaten die Anforderungsnutzdaten. Hier weiß der Browser mehr: Er weiß, dass der Balken der Wert des Eingabefeldes foo des übermittelten Formulars ist. Und das zeigt es Ihnen.
Sie unterscheiden sich also im Content-Type, aber nicht 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 die Anforderung mit 'Content-Type: application/json' als Request PayedLoad angezeigt und sendet Daten als json-Objekt.
Aber Anfrage mit 'Inhaltstyp: Anwendung/x-www-Formular-urlencoded' zeigt Formulardaten und sendet Daten als Schlüssel: Wert Pair, also wenn Sie ein Array von Objekten in einem Schlüssel haben es ist flach der Wert dieses Schlüssels:
{ Id: 1,
name:'john',
phones:[{title:'home',number:111111,...},
{title:'office',number:22222,...}]
}
sendet
{ Id: 1,
name:'john',
phones:[object object]
phones:[object object]
}