---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:---------------------:|:----------------------------------------------------------------------------:|
| 詹姆士 | [CodePen](https://codepen.io/z111048/pen/MWLVxyo) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/vYbRPXw) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/BaMrbpo) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/ZEwxPKa?editors=1010) |
| yuling | [Codepen](https://codepen.io/igzdflpu/pen/KKJoEyq) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/KKJoERX) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/wvNmOXo) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/dyamrmB?editors=1010) |
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/rNPdRZr) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/QWYmoYq) |
| Eden | [Codepen](https://codepen.io/iseden/pen/KKJoYPo) |
| 精靈 | [Codepen](https://codepen.io/justafairy/pen/abXYxWo) |
| cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/rNPdMPV) |
| shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/qBgowRE) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/jOdzRvX?editors=1010) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/MWLJYBN) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/JjxLqoE?editors=0010) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/ZEwxNYY) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/RwvMmJe?editors=0010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/oNmqrmK) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/abXYgQP?editors=0010) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/eYxMqxO) |
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/XWOqrOg?editors=1010) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/ZEwoYRN) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/KKJRwYE?editors=1010) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/vYbjORa) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/zYePEoa)
| dora | [CodePen](https://codepen.io/dorayu/pen/gOqeNop) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/KKJRdGX)
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/mdvLVPr) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/mdvLVZq?editors=1010) |
| Rogan | [CodePen](https://codepen.io/RoganHsu/pen/oNmdxBe?editors=0010) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/NWoMNwV) |
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/OJdZXBX)|
| Mattie | [CodePen](https://codepen.io/mattielin/pen/xxMjgrJ) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/rNPvzzR) |
| Jerry | [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/vYbjpmK) |
|Yijing|[CodePen](https://codepen.io/Yi-Jing-71080635/pen/eYxryxw)|
|RX00|[CodePen](https://codepen.io/llqzknqv-the-styleful/pen/WNPJzXG?editors=0010)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/qBgYpLb)|
| yaoling.liang |[CodePen](https://codepen.io/Yao-Ling-L-/pen/oNmdywe)|
| Lainie |[CodePen](https://codepen.io/Lainie88/pen/ExrLOJd?editors=1010)|
| lychee_kk |[CodePen](https://codepen.io/kakakala/pen/OJdEJMe?editors=1010)|
| ChrisSQR |[CodePen](https://codepen.io/ChrisSQR/pen/JjxZogY)|
| 保羅 |[CodePen](https://codepen.io/paul-1997/pen/PoVaNad?editors=0010)|
| Fabio20 |[CodePen](https://codepen.io/fabio7621/pen/GRzGMWy)|
| 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/yLZEQqg)|
| xuan |[CodePen](https://codepen.io/xuan0915/pen/WNPyLvR?editors=1011)|
| MY |[CodePen](https://codepen.io/ahmomoz/pen/PoVaXeW)|
| santu0868 |[CodePen](https://codepen.io/HatsumiSan/pen/GRzGbZw)|
| Ching |[CodePen](https://codepen.io/tzuchingg/pen/VwgBYNe?editors=1010)|
| ⭐小正 |[CodePen](https://codepen.io/colorgolden/pen/RwvBrwz?editors=1010)|
| Oria |[CodePen](https://codepen.io/kajing/pen/vYbaZvb?editors=1010)|
| gebyman |[CodePen](https://codepen.io/gebyman/pen/mdvjoQv)|
| 荷菓かのり |[CodePen](https://codepen.io/oogxwkvw-the-builder/pen/eYxjoOR)|
| nini1202desu |[CodePen](https://codepen.io/tvxq5206/pen/VwgBJZz?editors=1010)|
| hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/gOqdMWd)|
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/gOqdMVJ?editors=0010)|
| macihuang |[CodePen](https://codepen.io/macy1215/pen/JjxabYQ)|
| NathanJames |[CodePen](https://codepen.io/ufo060204/pen/YzBJwOM)|
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/MWLPMrM)|
| 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/dyagBBZ)|
| skypassion5000 |[Codepen](https://codepen.io/skypassion5000/pen/GRzwKRR?editors=0010)|
| davidtt |[Codepen](https://codepen.io/David-Tsai/pen/BaMGGzw?editors=1010)|
| Daylily |[Codepen](https://codepen.io/daylily/pen/oNmQOwp)|
| Andy |[Codepen](https://codepen.io/andy31342/pen/jOdXBXP)|
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/zYeeNBM)|
|sponge|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/GRzzaXb)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/zYebvdm) |