Quelle est la différence entre «Request Payload» et «Form Data» comme on le voit dans l'onglet Réseau des outils de développement Chrome

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

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

Googlé cela, mais n'a pas vraiment trouvé d'informations expliquant cela (juste des gens qui essaient d'obtenir des applications javascript pour envoyer des "Form Data" au lieu de "Request Payload".

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

Une demande avec Content-Type: application/jsonpeut 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 montre simplement ce qu'il soumet en tant que corps de charge utile. C'est tout ce qu'il peut faire car il ne sait pas d'où viennent les données.

Si vous soumettez un formulaire HTML avec method="POST"et Content-Type: application/x-www-form-urlencodedou Content-Type: multipart/form-datavotre demande 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 la charge utile de la demande. Ici, le navigateur en sait plus: il sait que la barre est la valeur du champ de saisie foo du formulaire soumis. Et c'est ce que cela vous montre.

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

Dans Chrome, la demande avec «Content-Type: application / json» s'affiche en tant que Request PayedLoad et envoie les données en tant qu'objet json.

Mais la demande avec 'Content-Type: application / x-www-form-urlencoded' affiche les données du formulaire et envoie les données sous forme de paire clé: valeur , donc si vous avez un tableau d'objets dans une clé, il aplatit 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]
}