「Form 格式是什麼？我只會傳 JSON。」

淺談 URLSearchParams and FormData

使用post發送資料回後端的時候，有以下四種常見的資料格式:

• application/x-www-form-urlencoded
  瀏覽器的原生<form>表單，如果不設置encype屬性，那麼最終就會以application/x-www-form-urlencoded方式提交數據。這是以編碼為URL參數的表單數據。
• multipart/form-data
  使用表單上傳文件時，必須讓<form>表單的encype等於multipart/form-data。
• application/json
• text/xml

本文只談前面兩種。

1. URLSearchParams v.s application/x-www-form-urlencoded

URLSearchParams() 是一個建構式，會傳回 URLSearchParams 物件。但是 IE 都不支援。

送出的 URL 參數長這樣： username=userNo1&password=123456aaa

2. Form-data

FormData對象用以將數據編譯成鍵值對(key and value)，以便用XMLHttpRequest來發送數據。如果表單enctype屬性設為multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具有同樣形式。

FormData 物件長這樣： name: lisa, birthday: Jun 16, isABtest: false

總結：到底怎麼傳form 格式給後端？

1. new FormData() or new URLSearchParams() 然後自己拼裝。
2. 將表單 form 元素用 submit()方式送出。

參考文章：

四種常見的POST 提交數據方式
https://imququ.com/post/four-ways-to-post-data-in-http.html

MDN — URLSearchParams
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

MDN — FormData Object
https://developer.mozilla.org/zh-TW/docs/Web/API/FormData/Using_FormData_Objects

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript