อะไรคือความแตกต่างระหว่าง“ ขอข้อมูลที่รับภาระ” กับ“ ข้อมูลแบบฟอร์ม” ตามที่เห็นในแท็บเครือข่ายเครื่องมือ dev ของ Chrome

ฉันมีเว็บแอปพลิเคชันเก่าที่ฉันต้องสนับสนุน (ซึ่งฉันไม่ได้เขียน)

เมื่อฉันกรอกแบบฟอร์มและส่งจากนั้นตรวจสอบแท็บ "เครือข่าย" ใน Chrome ฉันเห็น "ขอให้บรรจุข้อมูล" ซึ่งปกติฉันจะเห็น "ข้อมูลฟอร์ม" อะไรคือความแตกต่างระหว่างทั้งสองและเมื่อหนึ่งจะถูกส่งไปแทนคนอื่น?

Googled สิ่งนี้ แต่ไม่พบข้อมูลใด ๆ ที่อธิบายสิ่งนี้จริงๆ (แค่ผู้ที่พยายามรับแอพจาวาสคริปต์เพื่อส่ง "ข้อมูลฟอร์ม" แทน "ขอข้อมูล"

ขอ Payload - หรือจะแม่นยำมากขึ้น: ร่างกายน้ำหนักบรรทุกของคำขอ HTTP - เป็นข้อมูลปกติส่งโดยโพสต์หรือขอ PUT มันเป็นส่วนหนึ่งหลังจากที่ส่วนหัวและCRLFของคำขอ HTTP

คำขอContent-Type: application/jsonอาจมีลักษณะเช่นนี้:

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

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

หากคุณส่งสิ่งนี้ต่อ AJAX เบราว์เซอร์จะแสดงให้คุณเห็นสิ่งที่มันส่งเป็นส่วนของข้อมูล นั่นคือทั้งหมดที่ทำได้เพราะไม่รู้ว่าข้อมูลมาจากไหน

หากคุณส่งแบบฟอร์ม HTML ด้วยmethod="POST"และContent-Type: application/x-www-form-urlencodedหรือContent-Type: multipart/form-dataคำขอของคุณอาจมีลักษณะเช่นนี้:

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

foo=bar&name=John

ในกรณีนี้ data-form คือคำขอน้ำหนักบรรทุก ที่นี่เบราว์เซอร์รู้เพิ่มเติม: รู้ว่าแถบนั้นเป็นค่าของฟิลด์อินพุตของฟอร์มที่ส่ง และนั่นคือสิ่งที่แสดงให้คุณเห็น

ดังนั้นจึงแตกต่างกันในContent-Typeแต่ไม่ใช่ในวิธีการส่งข้อมูล ในทั้งสองกรณีข้อมูลอยู่ในส่วนของข้อความ และ Chrome จะแยกความแตกต่างของวิธีการนำเสนอข้อมูลให้คุณในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

ใน Chrome คำขอด้วย'เนื้อหาประเภท: แอปพลิเคชัน / json'แสดงเป็นคำขอ PayedLoad และส่งข้อมูลเป็นวัตถุ json

แต่คำขอด้วย'Content-Type: application / x-www-form-urlencoded' แสดงข้อมูลในแบบฟอร์มและส่งข้อมูลเป็นKey: Value Pairดังนั้นหากคุณมีอาเรย์ของวัตถุในคีย์เดียวมันจะลดค่าของคีย์นั้น:

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

ส่ง

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