---
# System prepended metadata

title: "\U0001F3C5 Day 33 - 常見的 POST 請求"
tags: [JS 直播班 - 2024 秋季班]

---

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