---
# System prepended metadata

title: "\U0001F3C5 3/29 (一) 每日任務"
tags: [JS 直播班 - 2021 春季班]

---

# 🏅 3/29 (一) 每日任務
###### 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 編碼。

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

![](https://i.imgur.com/6UoJVtD.png)

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