--- tags: JS 直播班 - 2022 秋季班 --- # 🏅 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 / 答案 | |:---------------------:|:----------------------------------------------------------------------------:| | Wei#2330 | [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/VwdzBoz) | | shinyhung#3825 | [Codepen](https://codepen.io/sean_1215/pen/ExRveay) | | albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/VwdzGvr) | | AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/WNyEgrW?editors=1010) | | hsiung阿熊#4079 | [Codepen](https://codepen.io/hsiungchi/pen/RwJZYPM) | | yumy#1940 | [CodePen](https://codepen.io/yumyyang/pen/WNyEgQW) | | jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/oNyePBo?editors=0010) | | 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/OJEjobr) | | 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/poKrOwJ) | | kuku#3118 | [Codepen](https://codepen.io/mengting-ku/pen/QWxMVML) | | 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/poKrOwJ) | | CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/rNKzZmM) | | 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/ZERJbzV) | | Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/rNKzZJj?editors=1010) | | Ron Liang#7277 | [CodePen](https://codepen.io/ron-go/pen/eYKELMB) | | Kimi #9564 | [CodePen](https://codepen.io/kimihu91/pen/KKeqoMb) | | Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/dyKzqwj?editors=1010) | | 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/NWzvLVq) | | 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/QWxMVXN?editors=0010) | | kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/MWXvqry) | | LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/vYrJVOM) | | William Lai#0196 | [Codepen](https://codepen.io/lai-weihan/pen/yLEoRJX) | | 軟綿綿 (๑•ᴗ•๑) ♡#3627 | [CodePen](https://codepen.io/Connie-Chien/pen/abKyRWa?editors=0010) | | 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/KKevGXq) | | Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/abKyRya?editors=1010) | | 勁辣雞腿寶#5817 | [Codepen](https://codepen.io/orz311013/pen/VwdzEyJ?editors=1010) | | yawun#0042 | [CodePen](https://codepen.io/monicalin/pen/VwdzEzO) | | amy芳#1385 | [CodePen](https://codepen.io/amy-chieng/pen/vYrJVaE) | | Hilda#7085 | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/KKevGBy) | | Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/qBKXJyw?editors=1010) | | PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/MWXvPZG) | | mandylai#4055 | [CodePen](https://codepen.io/mandy-lai-2/pen/xxzLyPQ) | | 圈圈#4060 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/BaVdqeW) | | Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/MWXvjmy) | | 法希娜#3206 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/XWYaxvo) | | 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/gOKxQzX) | | Loran#1105 | [CodePen](https://codepen.io/loranlin/pen/OJEjadZ?editors=1010) | | masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/XWYayOJ?editors=1010) | | KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/LYrjMXm) | | Yishan#4902 | [CodePen](https://codepen.io/gdjrehhw-the-animator/pen/eYKEbxv) | | 末次#0236 | [CodePen](https://codepen.io/yunjulee/pen/JjZywVL) | | 柔柔#1716 | [Codepen](https://codepen.io/pen/?editors=1010) | | 雷雷#7844 | [Codepen](https://codepen.io/lei-yi-jie/pen/ExRvrYo?editors=1010) | | charlottelee849#0366 | [Codepen](https://codepen.io/charlotte-lee/pen/GRGvwYO?editors=0011) | | Yuna Huang#2692 | [Codepen](https://codepen.io/Yuna1002/pen/GRGvzxJ?editors=0011) | | hannahTW#2224 | [Codepen](https://codepen.io/hangineer/pen/oNyempO?editors=1010) | | WEI_RIO#9342 | [Codepen](https://codepen.io/wei_wu/pen/YzvxBQo?editors=1011) | | JustinLiu#9699 | [CodePen](https://codepen.io/justin0227/pen/BaVdbBR?editors=0010) | | RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/MWXvLNB) | | Mylène#2481 | [Codepen](https://codepen.io/hamajibashi/pen/vYrJJXj) | | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/zYadbEg?editors=1010) | | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/zYadXvq) | | beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/poKrBmE) | | yen#5757 | [CodePen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=1010) | | Ruby Chen#7452 | [Codepen](https://codepen.io/ruby92429/pen/eYKEwWX?editors=1010) | | Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/JjZyaGW) | | Cookie SSS#6991 | [Codepen](https://codepen.io/sqhjikpa-the-selector/pen/yLEodxw?editors=1010) | | RayChen#6088 | [Codepen](https://codepen.io/raychen1996/pen/abKygPv) | | 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/ZERJgPL) | | Barret#1119 | [Codepen](https://codepen.io/barret0720/pen/gOKGYpV) | | 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/RwJLbGm) | | Hironaka#7367 | [Codepen](https://codepen.io/Hironaka0815/pen/abKLoEa?editors=0010) | | Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/gOKGYqr) | | 鑫鑫#4346 | [CodePen](https://codepen.io/Neil1024/pen/zYaEOeM?editors=1010) | | mou#2215 | [CodePen](https://codepen.io/shihchiehlan/pen/LYrzYVP?editors=0010) | | SASIMI#5099 | [codepen](https://codepen.io/sashimi1327/pen/BaVwodm) | | kancheng#3915 | [CodePen](https://codepen.io/kancheng/pen/NWzaxOK) | | 肉桂卷#0625 | [Codepen](https://codepen.io/ginnlee/pen/xxzXOxe?editors=0011) | | Lou#0085 | [Codepen](https://codepen.io/Lusie_H/pen/KKeXNma?editors=0010) | | jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/MWXEbGO?editors=1010) | | m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/vYreWGL) | | JackC#0411 | [CodePen](https://codepen.io/key0329/pen/GRGMOQm) | | CloThEs#0411 | [Codepen](https://codepen.io/CloThEsZ/pen/vYreWRy) | | Data#9297 | [Codepen](https://codepen.io/kirakira72/pen/ExRwoZy) | | hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/GRGMQOK?editors=0010) | | Hazel.#6020 | [CodePen](https://codepen.io/Hazelhsieh/pen/YzvEqqO?editors=1011) | | suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/MWXOyQm?editors=0010) | | Lucie#3831 | [Codepen](https://codepen.io/bisespei/pen/bGKYpQp) | | Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/MWXrqgq) | | yoyo#1003 | [Codepen](https://codepen.io/pen/YzvEmvx) | | Silvialu#4521 | [Codepen](https://codepen.io/Silvia091640/pen/gOKxyRB) | | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/VwdQpQj?editors=0010) | | Baozi#2042 | [Codepen](https://codepen.io/lillianyu/pen/XWYZgyB) | | yoshidc#0455 | [CodePen](https://codepen.io/yoshiyyc/pen/XWYZZmb) | |我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/bGKaWbz)| |Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/QWxQBvE?editors=0110)| |IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/XWYZPjo)| |Chung#5951|[codepen](https://codepen.io/yuju16/pen/MWXVYqz?editors=0010)| |sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/xxzWGer)| |君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/abKYdwx)| |Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/rNKdevx?editors=0010)| |Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/xxzWrYj) |Kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/oNyqabL?editors=1010) |YI#0863|[CodePen](https://codepen.io/YI0305/pen/zYajwgB?editors=0010)| |健育#5748|[CodePen](https://codepen.io/c1317156/pen/ZERovbX)| |Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/VwdxVLr)| |黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/xxzzxWL)| |Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/NWzzvep?editors=1011)| |竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/jOKKrRb)| |予予#9627|[Codepen](https://codepen.io/kiqzcraa/pen/PoaarYE)| |Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/xxzaqZd?editors=1010)| |yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/dyKdJvo)| |狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/MWXzLLo)| |Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/LYrazRR)| | cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/YzvMjvO)| |阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/wvXVgjx?editors=1010)| |蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/ZERgrVM?editors=1010)| |J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/YzOZGmb)| |Bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/YzJPorO?editors=0010)|