在前端開發中，當我們要將資料傳送到伺服器時，常見的資料格式有 JSON、FormData、URLSearchParams

這些都是資料包裝的格式，它們的用法和情境都不同，就來一一介紹它們～

JSON是什麼？

• JSON大家應該都有聽過，它是很常用到的資料儲存格式
• 它是一種以鍵值對（key-value） 表示的資料格式
• 它的結構和 JavaScript 物件類似，支援 巢狀結構、陣列、字串、數字、布林值、null

長怎樣？

• 傳送格式（Request Body）：

{
  "name": "Joanne",
  "age": 21
}

• HTTP Header：

Content-Type: application/json

怎麼用？

前端要把物件轉成 JSON 字串，再傳給後端

JSON.stringify() ：物件變 JSON

JSON.parse()：JSON 變物件

fetch("http://localhost:5000/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "Joanne", age: 21 })
});

什麼樣的情況會用到？

• 前後端 API 溝通（RESTful API）
• 傳遞結構化資料（物件、陣列）

FormData是什麼？

• FormData是瀏覽器內建的物件，專門用來模擬表單提交 (form submit)
• 它特別適合傳送檔案（File / Blob）或混合文字和檔案的資料
• 底層以 multipart/form-data 格式傳送

長怎樣？

• 傳送格式（Request Body）：

------WebKitFormBoundaryabc123
Content-Disposition: form-data; name="name"

Joanne
------WebKitFormBoundaryabc123
Content-Disposition: form-data; name="age"

21
------WebKitFormBoundaryabc123--

• HTTP Header：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryabc123

怎麼用？

// new 一個空的 FormData
const formData = new FormData();

// 從html的 <form> 生成
const formElement = document.querySelector("form");
const formData2 = new FormData(formElement);

formData.append("name", "Joanne");
formData.append("age", 21);
formData.append("avatar", fileInput.files[0]); // 可以放檔案

// 不需要手動設定 Content-Type，瀏覽器會自動加上 multipart/form-data; boundary=...

// 加入資料
fetch("http://localhost:5000/upload", {
  method: "POST",
  body: formData
});

什麼樣的情況會用到？

• 上傳檔案（圖片、影片、PDF）
• 傳送和 HTML <form> 一樣格式的資料
• 不需要 JSON 結構的情境

URLSearchParams是什麼？

• URLSearchParams 是一個專門處理 URL 查詢字串 的物件
• 格式是：key=value&key=value
• 預設會用 application/x-www-form-urlencoded 格式
• 不支援檔案，只能放字串或數字

長怎樣？

• 傳送格式（Request Body）：

name=Joanne&age=21

• HTTP Header：

Content-Type: application/x-www-form-urlencoded

怎麼用？

// new 一個空的URLSearchParams
const params = new URLSearchParams();

// 一次放入
const params2 = new URLSearchParams({ name: "Joanne", age: 21 });

// 從 URL 解析
const url = new URL("https://example.com?page=2&sort=asc");
const params3 = new URLSearchParams(url.search);

// 加入資料
params.append("name", "Joanne");
params.append("age", 21);

// Get Request
fetch("http://localhost:5000/search?" + params.toString());
// http://localhost:5000/search?name=Joanne&age=21

什麼樣的情況會用到？

• GET 查詢參數（search、filter）
• 傳送簡單的表單資料（不包含檔案）

參考資料

https://developer.mozilla.org/zh-TW/docs/Web/API/FormData/get

https://medium.com/itsems-frontend/javascript-json-stringify-and-json-parse-7a1251d3824c

https://marionma-69293.medium.com/form-%E6%A0%BC%E5%BC%8F%E6%98%AF%E4%BB%80%E9%BA%BC-%E6%88%91%E5%8F%AA%E6%9C%83%E5%82%B3-json-%E6%B7%BA%E8%AB%87-urlsearchparams-and-formdata-9da9a65e66ca