# 🏅 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 編碼。

<!-- 以下程式碼需要在 VSCode 本機執行 -->
<form action="#">
  帳號:
  <input type="text" name="email"> <!-- key1 是 email -->
  <br>
  密碼:
  <input type="text" name="passward"> <!-- key2 是 passward -->
  <input type="submit" value="送出">
</form>


### 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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

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]() |
-->