# 🏅 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 / 答案 | | --- | ----- | ----- | | 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/mdNxoPa) | | 02 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/gOVqxvX) | | 03 | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/ZEgwJod) | | 04 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/xxvMLBO) | | 05 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/jOgdGBN?editors=0010) | | 06 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/QWeYqJj?editors=0010) | |07|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/oNKmGJy?editors=0010)| | 08 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/mdNvqVZ) | | 09 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/YzmBEmy?editors=0010) | | 10 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/jOgdYPz?editors=1010) | | 11 | kaka_945 | [CodePen](https://codepen.io/kay945/pen/QWeYadx) | | 12 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/KKOJQWK?editors=1010) | | 13 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/abeXqEw) | | 14 | mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/OJKdvaR) | | 15 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/OJKdEYK?editors=1010) | | 16 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/dyxajBy) | | 17 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/JjgxMKj) | | 18 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/BaXMGOL) | | 19 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/xxvMMGE) | | 20 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/KKOJLMj) | | 21 | JIA | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/KKOJLYV) | | 22 | Hedwig | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/dyxroZJ?editors=1010) | | 23 | Glen_69515 | [codePen](https://codepen.io/glenyaochih/pen/YzmgqjL)| | 24 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/bGXZemB) | | 25 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/eYqXeZW?editors=0010) | | 26 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/KKOEBPd) | | 27 | Mike | [CodePen](https://codepen.io/mike2049/pen/mdNgrJy?editors=0010) | |28|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/ZEgZrVG?editors=0010)| | 29 | jerry_66983 | [CodePen](https://codepen.io/Barry-C/pen/qBewoGJ) | | 30 | Mos |[CodePen](https://codepen.io/mos25399/pen/vYoMaLr?editors=0010)| | 31 | Celine | [CodePen](https://codepen.io/szuning/pen/XWvGGPZ) | | 32 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/jOgoGQd?editors=1010) | | 33 | Rogan | [CodePen](https://codepen.io/pen/) | | 34 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/WNVqxqb/) | | 35 | JRz | [CodePen](https://codepen.io/JRZHENG/pen/KKOOVxa) | | 36 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/XWvvdvL?editors=0010) | | 37 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/ZEggOPQ?editors=0010) | | 38 | alec1203 | [CodePen](https://codepen.io/soloayaya/pen/bGXXgWx?editors=0012) | | 39 | Emma | [CodePen](https://codepen.io/Emma0919/pen/XWvvqwZ) | | 40 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/ZYzzeap?editors=1112) | | 41 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/jENNwMp?editors=0010) | | 42 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/azooLOG) | | 43 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/bNbbYrv) | | 44 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/zxOOjwo) | | 45 | charlottelee | [Codepen](https://codepen.io/char849/pen/WbeNBwb) | | 46 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/MYgdWwE) | <!-- 可複製下方格式 | | | [CodePen]() | -->