--- tags: JS 直播班 - 2023 秋季班 --- # 🏅 Day 33 - 常見的 POST 請求 三種常見的 POST 請求 Content-Type --- 使用 POST 發送 request 請求的時候，將必須告訴伺服器我們所提交的數據類型是什麼，而這通常都會透過 headers 中的 Content-Type 將相關資訊傳送給伺服器。 以下替大家複習常見的三種 POST Content-Type： ### application/x-www-form-urlencoded 這種 POST 提交數據的方式很常見，**它是屬於瀏覽器 `<form>` 表單的原生提交方式**（也就是說，如果表單沒有設定 `enctype` 屬性，默認就會用這種方式提交）。 （以下是補充介紹，可以先看過去就好） 值得注意的是，它會將提交的數據按照 `key1=val1&key2=val2` 的方式進行 URL 編碼。 ```htmlembedded= <!-- 以下程式碼需要在 VSCode 本機執行 --> <form action="#"> 帳號: <input type="text" name="email"> <!-- key1 是 email --> <br> 密碼: <input type="text" name="passward"> <!-- key2 是 passward --> <input type="submit" value="送出"> </form> ``` ![](https://i.imgur.com/sIujGHD.png) ### application/json 因為 JSON 規範現在很流行，這種提交方式也已經非常普遍。**這表示傳遞的數據是 JSON 格式** ，課程中所使用的 API 也是使用這種 Content-Type。 ### multipart/form-data 如果我們提交的檔案為 **「圖片、影片」** 等，就必須使用這種 Content-Type。上傳檔案的操作需要使用 `<input type="file">` 這個 HTML 標籤進行，並且**需要將資料轉成 formData 格式**才能順利 POST 給伺服器。 （這是比較進階的 POST 用法，同學可以先知道有這回事就好，有興趣的同學可以參考 [這篇文章](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData)） 問題 --- 1. 請問瀏覽器預設的表單提交方式，其 Content-Type 類型是什麼? 2. 請問如果檔案為圖片、影片，則應該用哪一種 Content-Type 提交? 3. 請問如果資料為 JSON 格式，則應該用哪一種 Content-Type 提交? ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： 1. application/x-www-form-urlencoded 2. multipart/form-data 3. application/json --> 回報區 --- | Discord | CodePen / 答案 | |:---------------------:|:----------------------------------------------------------------------------:| | 詹姆士 | [CodePen](https://codepen.io/z111048/pen/MWLVxyo) | | Helen | [CodePen](https://codepen.io/milkteamonster/pen/vYbRPXw) | | kawa | [CodePen](https://codepen.io/z83xji6/pen/BaMrbpo) | | damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/ZEwxPKa?editors=1010) | | yuling | [Codepen](https://codepen.io/igzdflpu/pen/KKJoEyq) | | 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/KKJoERX) | | Moreene | [CodePen](https://codepen.io/Moreene/pen/wvNmOXo) | | pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/dyamrmB?editors=1010) | | 維哲 | [CodePen](https://codepen.io/kwz1202/pen/rNPdRZr) | | yuan! | [CodePen](https://codepen.io/townyuan/pen/QWYmoYq) | | Eden | [Codepen](https://codepen.io/iseden/pen/KKJoYPo) | | 精靈 | [Codepen](https://codepen.io/justafairy/pen/abXYxWo) | | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/rNPdMPV) | | shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/qBgowRE) | | Peng | [CodePen](https://codepen.io/H-Peng/pen/jOdzRvX?editors=1010) | | runweiting | [CodePen](https://codepen.io/weiting14/pen/MWLJYBN) | | Alyce | [CodePen](https://codepen.io/alycehwy/pen/JjxLqoE?editors=0010) | | yuan2781 | [CodePen](https://codepen.io/ismebir/pen/ZEwxNYY) | | Uli | [CodePen](https://codepen.io/uli1313/pen/RwvMmJe?editors=0010) | | Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/oNmqrmK) | | Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/abXYgQP?editors=0010) | | stone4584 | [CodePen](https://codepen.io/Royen0506/pen/eYxMqxO) | | tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/XWOqrOg?editors=1010) | | 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/ZEwoYRN) | | 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/KKJRwYE?editors=1010) | | xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/vYbjORa) | | Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/zYePEoa) | dora | [CodePen](https://codepen.io/dorayu/pen/gOqeNop) | | yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/KKJRdGX) | ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/mdvLVPr) | | SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/mdvLVZq?editors=1010) | | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/oNmdxBe?editors=0010) | | JUNEW | [CodePen](https://codepen.io/June-W/pen/NWoMNwV) | |celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/OJdZXBX)| | Mattie | [CodePen](https://codepen.io/mattielin/pen/xxMjgrJ) | | claire | [CodePen](https://codepen.io/yi-wen-chen/pen/rNPvzzR) | | Jerry | [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/vYbjpmK) | |Yijing|[CodePen](https://codepen.io/Yi-Jing-71080635/pen/eYxryxw)| |RX00|[CodePen](https://codepen.io/llqzknqv-the-styleful/pen/WNPJzXG?editors=0010)| |kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/qBgYpLb)| | yaoling.liang |[CodePen](https://codepen.io/Yao-Ling-L-/pen/oNmdywe)| | Lainie |[CodePen](https://codepen.io/Lainie88/pen/ExrLOJd?editors=1010)| | lychee_kk |[CodePen](https://codepen.io/kakakala/pen/OJdEJMe?editors=1010)| | ChrisSQR |[CodePen](https://codepen.io/ChrisSQR/pen/JjxZogY)| | 保羅 |[CodePen](https://codepen.io/paul-1997/pen/PoVaNad?editors=0010)| | Fabio20 |[CodePen](https://codepen.io/fabio7621/pen/GRzGMWy)| | 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/yLZEQqg)| | xuan |[CodePen](https://codepen.io/xuan0915/pen/WNPyLvR?editors=1011)| | MY |[CodePen](https://codepen.io/ahmomoz/pen/PoVaXeW)| | santu0868 |[CodePen](https://codepen.io/HatsumiSan/pen/GRzGbZw)| | Ching |[CodePen](https://codepen.io/tzuchingg/pen/VwgBYNe?editors=1010)| | ⭐小正 |[CodePen](https://codepen.io/colorgolden/pen/RwvBrwz?editors=1010)| | Oria |[CodePen](https://codepen.io/kajing/pen/vYbaZvb?editors=1010)| | gebyman |[CodePen](https://codepen.io/gebyman/pen/mdvjoQv)| | 荷菓かのり |[CodePen](https://codepen.io/oogxwkvw-the-builder/pen/eYxjoOR)| | nini1202desu |[CodePen](https://codepen.io/tvxq5206/pen/VwgBJZz?editors=1010)| | hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/gOqdMWd)| | bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/gOqdMVJ?editors=0010)| | macihuang |[CodePen](https://codepen.io/macy1215/pen/JjxabYQ)| | NathanJames |[CodePen](https://codepen.io/ufo060204/pen/YzBJwOM)| | Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/MWLPMrM)| | 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/dyagBBZ)| | skypassion5000 |[Codepen](https://codepen.io/skypassion5000/pen/GRzwKRR?editors=0010)| | davidtt |[Codepen](https://codepen.io/David-Tsai/pen/BaMGGzw?editors=1010)| | Daylily |[Codepen](https://codepen.io/daylily/pen/oNmQOwp)| | Andy |[Codepen](https://codepen.io/andy31342/pen/jOdXBXP)| |阿榮|[Codepen](https://codepen.io/codeitaday/pen/zYeeNBM)| |sponge|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/GRzzaXb)| | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/zYebvdm) |