Apa perbedaan antara "Minta Payload" vs "Form Data" seperti yang terlihat di tab Jaringan alat dev Chrome

Saya memiliki aplikasi web lama yang harus saya dukung (yang tidak saya tulis).

Ketika saya mengisi formulir dan mengirimkan kemudian periksa tab "Jaringan" di Chrome saya melihat "Minta Payload" di mana saya biasanya melihat "Formulir Data". Apa perbedaan antara keduanya dan kapan satu dikirim dan bukan yang lainnya?

Cari di Google, tetapi tidak benar-benar menemukan info yang menjelaskan hal ini (hanya orang yang mencoba mendapatkan aplikasi javascript untuk mengirim "Formulir Data" alih-alih "Minta Payload".

Permintaan Muatan - atau lebih tepatnya: muatan muatan Permintaan HTTP - adalah data yang biasanya dikirim oleh Permintaan POST atau PUT . Ini bagian setelah header dan CRLFdari Permintaan HTTP .

Permintaan dengan Content-Type: application/jsonmungkin terlihat seperti ini:

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

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

Jika Anda mengirimkan ini per AJAX browser hanya menunjukkan kepada Anda apa yang dikirimkan sebagai badan muatan. Hanya itu yang bisa dilakukan karena tidak tahu dari mana data berasal.

Jika Anda mengirimkan Formulir HTML dengan method="POST"dan Content-Type: application/x-www-form-urlencodedatau Content-Type: multipart/form-datapermintaan Anda mungkin terlihat seperti ini:

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

foo=bar&name=John

Dalam hal ini form-data adalah payload permintaan. Di sini Peramban lebih tahu: ia tahu bahwa bilah adalah nilai dari bidang input foo dari formulir yang dikirimkan. Dan itulah yang ditunjukkan kepada Anda.

Jadi, mereka berbeda dalam hal Content-Typetetapi tidak dalam cara data dikirimkan. Dalam kedua kasus, data ada di badan pesan. Dan Chrome membedakan bagaimana data disajikan kepada Anda di Alat Pengembang.

Di Chrome, permintaan dengan 'Tipe-Konten: aplikasi / json' ditampilkan sebagai Minta PayedLoad dan mengirim data sebagai objek json.

Tetapi permintaan dengan 'Jenis-Konten: application / x-www-form-urlencoded' memperlihatkan Data Formulir dan mengirimkan data sebagai Kunci: Pasangan Nilai , jadi jika Anda memiliki array objek dalam satu kunci, maka akan mengempiskan nilai kunci itu:

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

mengirim

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