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

<!-- 以下程式碼需要在 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 / 答案 |
|:---------------------:|:----------------------------------------------------------------------------:|
| 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)|