HTTP POST 四大提交資料方式完整解析：Content-Type 與實體主體深度剖析

HTTP POST 四大提交資料方式完整解析：Content-Type 與實體主體深度剖析

HTTP/1.1 規範中 POST 方法用於向伺服器提交資料，但協定未強制規定資料編碼格式。伺服端依賴 Content-Type 標頭解析實體主體。本文系統解析四種主流 POST 提交方式的封裝格式、適用場景、伺服端解析要點與避坑指南。

POST 請求結構回顧

POST /path HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Content-Length: 42

title=test&sub[]=1&sub[]=2&sub[]=3

三大組成：請求行、請求標頭、實體主體。Content-Type 告知伺服器主體編碼方式。

方式一：application/x-www-form-urlencoded（最常見）

特徵

• 瀏覽器 <form> 預設編碼（未設 enctype）
• 格式：key1=val1&key2=val2，鍵值皆 URL 編碼
• 不支援檔案上傳、不支援巢狀結構

原始請求範例

POST /api HTTP/1.1
Content-Type: application/x-www-form-urlencoded; charset=utf-8

name=John+Doe&age=30&tags%5B%5D=php&tags%5B%5D=js

伺服端解析

AJAX 使用

// jQuery 預設即此類型
$.ajax({
    type: 'POST',
    url: '/api',
    data: { name: 'John', tags: ['php', 'js'] }, // 自動序列化
    success: ...
});

方式二：multipart/form-data（檔案上傳標準）

特徵

• <form enctype="multipart/form-data"> 必須指定
• 以 boundary 隨機字串分隔欄位
• 每個部分含 Content-Disposition、可選 Content-Type
• 支援二進位檔案、文字欄位混合

原始請求範例

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123

------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="title"

My Photo
------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="file"; filename="photo.jpg"
Content-Type: image/jpeg

(binary data...)
------WebKitFormBoundaryABC123--

關鍵點

• boundary 必須足夠隨機避免與內容衝突
• 檔案部分包含 filename 與 Content-Type
• 結尾以 --boundary-- 標示
• RFC 1867 / RFC 7578 規範定義

方式三：application/json（現代 API 標準）

特徵

• 主體為 JSON 字串，支援巢狀物件、陣列、型別
• RESTful API、微服務通訊首選
• 瀏覽器原生 JSON.stringify 支援（IE8+）

原始請求範例

POST /api/users HTTP/1.1
Content-Type: application/json; charset=utf-8

{"name":"John","age":30,"tags":["php","js"],"address":{"city":"Taipei","zip":"100"}}

伺服端解析陷阱

<?php
// PHP 解析 JSON 請求
$contentType = $_SERVER['CONTENT_TYPE'] ?? '';
if (strpos($contentType, 'application/json') === 0) {
    $json = file_get_contents('php://input'); // 讀取原始輸入流
    $data = json_decode($json, true);         // 解析為關聯陣列
    // $data['name'], $data['tags'], $data['address']['city']...
}

前端框架預設行為

• AngularJS $http：預設送 JSON
• Axios/Fetch：預設送 JSON
• jQuery：預設送 x-www-form-urlencoded，需 contentType: 'application/json' + JSON.stringify(data)

方式四：text/xml（XML-RPC / SOAP 遺留系統）

特徵

• 主體為 XML 文件，結構化但冗長
• XML-RPC：遠端程序呼叫協定，WordPress、搜尋引擎 Ping 服務仍在使用
• SOAP：企業級 Web Service 標準，WSDL 定義契約

XML-RPC 請求範例

POST /xmlrpc HTTP/1.1
Content-Type: text/xml



  examples.getStateName
  
    41
  

現代替代方案

JSON 結構更輕量、解析更快、人類可讀性更好。除非對接遺留系統，新專案強烈建議使用 JSON。

四大方式對照表

選型建議

1. 傳統表單、簡單 AJAX → x-www-form-urlencoded
2. 檔案上傳 → multipart/form-data（無替代）
3. 現代 API、SPA、微服務 → application/json（首選）
4. 對接舊系統 → text/xml（被動適配）

進階：自訂 Content-Type

開發者可定義專屬 Content-Type（如 application/vnd.myapp.v1+json），配合 API 版本控管、內容協商，但需雙端協同實作解析器。