想Post的內容是所有的Form欄位

一般來說，在建立Form表單的時候，撰寫上會使用HtmlHelper，這種產生出來的html內容只要post上去asp .net mvc model binding基本上沒有什麼問題。

因此可以利用Form表單本身然後透過jquery序列化的方式作為送出的資料。

假設我們的Form表單的id是postForm，那麼整個post方式就是：

$.ajax({
 type: "POST",
 url: "@Url.Action("JqueryPost")",
 data: $("#postForm").serialize()
})

換句話說其實就是用jquery模擬一般的postsubmit。

想post的內容只是表單裡面幾個欄位

有時候要post的內容可能不全部在同一個Form表單，或者可能有幾個不同地方的欄位組成，這個時候，第一種情境的序列化做法就不適合了。

這個時候可能會想說建立一個javascript 物件，然後直接post這個物件。例如，假設後端要binding的model 有 Title和Content欄位：

var data = {};
data.Title = "a";
data.Content = "b";

$.ajax({
 type: "POST",
 url: "@Url.Action("JqueryPost")",
 data: data
})

這個會binding成功，因此可能想說都是這麼處理就好，但是，當要binding的物件比較複雜的時候，這個方式就會binding失敗。

舉例來說，假設我們有同樣的model結構，但是這個時候後台變成需要的是一個list，這個時候可能想說傳入array即可：

var data = [];
data.push({ Title: "1", Content: "2" });
data.push({ Title: "2", Content: "4" });

$.ajax({
 type: "POST",
 url: "@Url.Action("JqueryPost")",
 data: data
})

但是這個會binding失敗，主要原因是因為預設jquery使用的是application/x-www-form-urlencoded作為ContentType - 這種方式的產生結構類似於querystring的那種串聯方式，因此在處理複雜結構 的時候產生出來的內容不符合asp .net mvc預設model binding的邏輯。

因此建議直接傳送json格式的內容，在處理複雜結構沒有什麼問題。

不過要使用json格式的資料就會需要：

• 用JSON.stringfy()把物件轉成json的字串樣子
• 把ContentType設定成為：application/json - 告知mvc傳入的內容是json

因此整個範例變成：

var data = [];
data.push({ Title: "1", Content: "2" });
data.push({ Title: "2", Content: "4" });

$.ajax({
 type: "POST",
 url: "@Url.Action("JqueryPost")",
 data: SON.stringify(data),
 contentType: "application/json"
})

想post的內容包含檔案上傳

當想要post上去的內容包含檔案上傳(input type="file")的時候，上述提到的2種做法都沒有辦法達成。

原因是因為檔案上傳要包含的資訊豐富很多，上述兩種方式都沒有辦法達到。

因此當需要post的內容包含檔案上傳，需要使用特殊的資料類型FormData。

要使用FormData非常的簡單，只需要在new的時候傳入Form的html element物件即可。

有了FormData作為資料之後，還有兩個設定：

1. processData要設定為false避免jquery傳送的時候有額外做一些處理
2. 把ContentType設定為false讓jquery決定送出的類型

整個的範例如下：

var data = new FormData($("#postForm")[0]);

$.ajax({
 type: "POST",
 url: "@Url.Action("JqueryPost")",
 data: data,
 processData: false,
 contentType: false
})