您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

AJAX 傳值方式大全：區別、選型與最佳實踐

編輯：程式設計綜合問答

問題背景

前端開發中，AJAX 請求傳遞參數的方式多種多樣（如 Form Data、Query String、JSON、FormData、URLSearchParams 等），初學者常感困惑：這麼多方式有什麼區別？學其中一個夠不夠？

常見傳值方式對比

方式	Content-Type	適用場景	優點	缺點
application/x-www-form-urlencoded	application/x-www-form-urlencoded	簡單鍵值對、表單提交、GET 請求參數	瀏覽器原生支援、所有語言後端易解析	不支援文件上傳、大數據傳輸效率低、需手動序列化
multipart/form-data	multipart/form-data	文件上傳、混合表單（文件+字段）	原生支援二進制文件、瀏覽器自動處理邊界	傳輸開銷大、不適合純 JSON 數據
application/json	application/json	RESTful API、複雜嵌套數據、前後端分離	結構清晰、支援嵌套對象/數組、現代框架首選	需手動 JSON.stringify、舊版 IE 需 polyfill、非表單原生
FormData 對象	multipart/form-data (自動)	HTML 表單序列化、文件上傳、動態構建表單數據	API 簡單、自動處理文件、可追加任意字段	無法直接發送 JSON、調試時難以在 Network 面板查看原始內容
URLSearchParams	application/x-www-form-urlencoded	構建查詢字符串、簡單鍵值對 POST	現代 API、可直接傳給 fetch body、支援迭代	不支援文件、僅限字符串值

圖片參考

問題中提到的各種方式示意圖：

補充說明圖：

最佳實踐建議

現代項目首選 JSON：前後端分離架構下，fetch 或 axios 默認發送 JSON，後端統一用 @RequestBody (Spring) 或 body-parser.json() (Express) 接收。
文件上傳必用 FormData：<input type="file"> 選擇文件後，`new FormData(formElement)` 即可一鍵打包所有字段與文件。
GET 請求用 URLSearchParams：`fetch('/api?' + new URLSearchParams(params))` 乾淨利落。
避免手動拼接字符串：手動 `key=val&key2=val2` 易出錯（特殊字符轉義），務必用內置 API。
統一封裝請求庫：項目中封裝 request(config)，內部根據 config.data 類型自動設置 Header 與序列化，業務代碼零感知。

回答要點

「一般用 8-7 的 ajax 方式就夠了，其它都不太常用或者有局限。」—— 最佳回答的核心觀點是：掌握 JSON 與 FormData 兩大主流方式即可覆蓋 95% 以上場景，其他作為了解即可。

補充：jQuery $.ajax 內部處理

// jQuery 會根據 data 類型自動處理
$.ajax({
  url: '/api',
  method: 'POST',
  data: { a: 1, b: 'test' },          // 物件 → application/x-www-form-urlencoded
  // data: JSON.stringify(obj),       // 字符串 + contentType: 'application/json' → JSON
  // data: new FormData(form),        // FormData → multipart/form-data (自動設置 processData: false, contentType: false)
  success: res => console.log(res)
});