常用的Form表單的編碼型別：

• application/x-www-form-urlencoded 普通的form表單提交
• application/json" 用於 複雜JSON資料的提交
• multipart/form-data 用於 檔案上傳

一、x-www-form-urlencoded（預設）

application/x-www-form-urlencoded 普通的form表單提交

瀏覽器會將表單資料轉換 k1=v1&k2=v2&k3=v3...這種格式的字串。

get 提交
瀏覽器把form資料轉換成一個字串 k1=v1&k2=v2&k3=v3...

post 提交
瀏覽器把form資料轉換成一個字串 k1=v1&k2=v2&k3=v3... ，封裝到請求體（http body）中，然後傳送到server。

我們用 jQuery的 ajax() post 提交資料時，Content-Type預設值都是application/x-www-form-urlencoded;charset=utf-8。
當向後端服務提交資料時，瀏覽器預設會將提交的資料轉成 k1=v1&k2=v2&k3=v3...這種格式。

一個完整的 ajax() post提交 ，如圖：

二、multipart/form-data （上傳檔案）

上傳檔案時，必須使用 multipart/form-data ；
必須用post提交；
使用時，需要將form 的 enctype屬性設定為 multipart/form-data。

看一個請求示例：

POST http://www.example.com HTTP/1.1 
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA 

------WebKitFormBoundaryrGKCBY7qhFd3TrwA 
Content-Disposition: form-data; name="text" 

title 
------WebKitFormBoundaryrGKCBY7qhFd3TrwA 
Content-Disposition: form-data; name="file"; filename="chrome.png" 
Content-Type: image/png 

PNG ... content of chrome.png ... 
------WebKitFormBoundaryrGKCBY7qhFd3TrwA-- 
 

首先生成了一個 boundary 用於分割不同的欄位，為了避免與正文內容重複，boundary 很長很複雜。

然後 Content-Type 裡指明瞭資料是以 mutipart/form-data 來編碼，本次請求的 boundary是什麼內容。

訊息主體 裡按照欄位個數又分為多個結構類似的部分，每部分都是以 --boundary 開始，緊接著內容描述資訊 ，然後是回車，最後是欄位具體內容（文字或二進位制）。
如果傳輸的是檔案，還要包含檔名和檔案型別資訊。

訊息主體最後以 --boundary-- 標示結束。

上面提到的這兩種 POST 資料的方式，都是瀏覽器原生支援的，而且現階段原生 form 表單也只支援這兩種方式。

三、application/json（當前及未來的主流）

現在越來越多的人把 Content-Type 設定為application/json 作為響應頭。
除了低版本IE之外，各大瀏覽器都原生支援 JSON.stringify，服務端語言也都有處理 JSON 的函式。

JSON 格式支援 鍵值對複雜得多的結構化資料。

AngularJS 預設就是application/json提交

例如下面這段程式碼：

var data = {'title':'test', 'sub' : [1,2,3]}; 
$http.post(url, data).success(function(result) { 
    ... 
}); 

最終傳送的請求是：

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8 

{"title":"test","sub":[1,2,3]}

這種方案，可以方便的提交複雜的結構化資料，特別適合 RESTful 的介面。

一個完整的AngularJS 請求 ，Content-Type 是 appliction/json
如下：