# 🏅 DAY32 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

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


<!-- 解答
1. application/x-www-form-urlencoded
2. multipart/form-data
3. application/json
-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/qBXwMMR |
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=1011 |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/bGryBZd|
| Iris Huang | https://codepen.io/ythuang/pen/Jjyqbzv |
| 米米 | https://codepen.io/Jameshsu0407/pen/jOLoVgM?editors=0010 |
|Aaron Tu|https://codepen.io/aarontu/pen/dyzEOBQ|
|有廖先生(Rain)|https://codepen.io/billpop741/pen/mdMYRbZ|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/QWMRdbK?editors=0010 |
| Sam | https://codepen.io/sam-hsu/pen/OJjYWyV |
|POPEYE | https://codepen.io/popeye_ux/pen/gOxJgaO |
|lumei|https://codepen.io/l_umei/pen/wvqbgEJ|
|Louis| https://codepen.io/Louis164156/pen/ExvzZdr?editors=1010 |
| Jun Ting Lin | https://codepen.io/jake1155/pen/vYJwgzO |
| Gill | https://codepen.io/Gill-Chin/pen/QWMRdXQ?editors=0011 |
| Yunei | https://codepen.io/Yunei/pen/LYjoWYE |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/VwzOpva?editors=0010|
| 格可 | https://codepen.io/catabo/pen/XWawMZr |
| Bella Shya | https://codepen.io/BellaXie/pen/vYJwxve?editors=0010 |
| Elaine Liu | https://codepen.io/elaine7598/pen/yLoWMYR?editors=1010 |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/abyrWvp |
|Jasper|https://codepen.io/li-jasper/pen/mdMYmPK
Tim Lin|https://codepen.io/TimmyLin/pen/OJjYmrK
| Lai | https://codepen.io/co_lai/pen/xxLNrRa?editors=1010 |
| 陳暐中 | https://codepen.io/wei-z/pen/VwzOzaa?editors=0010 |
| YC | https://codepen.io/YCLu/pen/KKvLvax |
| 雪莉 |https://codepen.io/utshang216/pen/rNzgzYX |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/ZEJNJZE?editors=1010 |
|Calon|https://codepen.io/Calon0118/pen/pormWyo|
|Trista|https://codepen.io/trista6140/pen/mdMYxEN|
|鉦勝|https://codepen.io/atckmax823/pen/bGryMvK?editors=1010|
|Bonnie|https://codepen.io/bonnieli1414/pen/abyraEz?editors=1010|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/xxLNyWL?editors=1010 |
|kk|https://codepen.io/potatokaka/pen/ExvBVZE?editors=1011|
|鄭安志|https://codepen.io/lwmtsgek/pen/MWvMaEv?editors=1010|
|張喆|https://codepen.io/wow767t/pen/RwZzrpG|
| Steven Chan | https://codepen.io/Steven1220/pen/BadgzeQ |
|AKI|https://codepen.io/akichen27/pen/BadgYQO|
|小K|https://codepen.io/kelen1995/pen/mdMZvxL|
| ZOE WU | https://codepen.io/Zoechiueh/pen/ZEJgGgO?editors=0010 |
|艾瑞克|https://codepen.io/ericla/pen/GRvVoKJ?editors=0010|
|danny123|https://codepen.io/binlandz123/pen/yLombGL?editors=1010 |
| Riley | https://codepen.io/jjpxbprd/pen/mdMNBzL|
| ZY Hsu | https://codepen.io/zihyin/pen/ZEJgrmG?editors=1010|
| 許閔翔 | https://codepen.io/oupbzfxq-the-scripter/pen/eYEqqxQ|
|Gui|https://codepen.io/guitimliu/pen/NWaKoZE|
| 劉維倫 | https://codepen.io/lun0223/pen/wvrwZMa?editors=1010 |
|paul|https://codepen.io/printfootya/pen/gOGOeqZ?editors=0010|
|Genos|https://codepen.io/pb220416/pen/ExwxLGe|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/eYGYjZY?editors=0010|
|YOYO|https://codepen.io/lumedkle/pen/Jjrogpp?editors=1010|
|Sandy|https://codepen.io/Sandy_L/pen/OJxVRwe?editors=0010|
|Alvin|https://codepen.io/Alvin20201116/pen/dyVoQvM|
|kailun|https://codepen.io/Kailun/pen/VwMeQLx|
| 傑瑞 | https://codepen.io/auatwood909815/pen/XWeKRdm?editors=0010 |
|Clara|https://codepen.io/ClaraChen/pen/ZEXWwvO?editors=1011|
| Hamaji | https://codepen.io/hamajibashi/pen/poWNLwJ |
| Aya | https://codepen.io/NoNameNote/pen/QWqdXGY |
|