web-dev-qa-db-fra.com

Quelle est la différence entre "Request Payload" et "Données de formulaire", comme indiqué dans Chrome onglet Outils de développement, sur l'onglet Réseau

J'ai une ancienne application Web à supporter (que je n'ai pas écrite).

Lorsque je remplis un formulaire et que je le soumets, vérifiez ensuite l'onglet "Réseau" dans Chrome. Je vois "Demander une charge utile", où je verrais normalement les "Données du formulaire". Quelle est la différence entre les deux et quand l’un serait-il envoyé au lieu de l’autre?

Googlé cela, mais n'a pas vraiment trouvé aucune explication expliquant cela (juste des personnes essayant d'obtenir des applications javascript pour envoyer des "données de formulaire" au lieu de "Request Payload".

formshttprestpostgoogle-chrome-devtools
213
red888

La charge utile de la demande - ou pour être plus précis: corps de la charge utile d'une demande HTTP - correspond aux données envoyées normalement par un demande POST ou PUT . C'est la partie après les en-têtes et la CRLF d'un requête HTTP .

Une demande avec Content-Type: application/json peut ressembler à ceci:

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

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

Si vous soumettez ceci par AJAX, le navigateur vous indique simplement ce qu'il soumet en tant que corps de données utiles. C’est tout ce qu’il peut faire, car il n’a aucune idée de l’origine des données.

Si vous soumettez un formulaire HTML avec method="POST" et Content-Type: application/x-www-form-urlencoded ou Content-Type: multipart/form-data, votre requête peut ressembler à ceci:

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

foo=bar&name=John

Dans ce cas, les données de formulaire sont les données utiles de la demande. Ici, le navigateur en sait plus: il sait que bar est la valeur du champ d'entrée foo du formulaire soumis. Et c’est ce que cela vous montre.

Donc, ils diffèrent dans le Content-Type mais pas dans la manière dont les données sont soumises. Dans les deux cas, les données sont dans le corps du message. Et Chrome distingue la manière dont les données vous sont présentées dans les outils de développement.

240
lefloh

Dans Chrome, les requêtes avec 'Content-Type: application/json' s'affichent sous la forme Request PayedLoad et envoient les données sous la forme d'un objet json.

Mais la requête avec 'Type de contenu: application/x-www-form-urlencoded' affiche les données du formulaire et envoie les données sous la forme clé: valeur Pair, donc si vous avez un tableau d'objet dans une clé elle est plate la valeur de cette clé:

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

envoie

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