經過Ajax post Json類型的數據到Controller

View

 function postSimpleData() { $.ajax({ type: "POST", url: "/Service/SimpleData", contentType: "application/json", //必須有 dataType: "json", //表示返回值類型，沒必要須 data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' }), //至關於 //data: "{'str1':'foovalue', 'str2':'barvalue'}",  success: function (jsonResult) { alert(jsonResult); } }); } function postListString() { $.ajax({ type: "POST", url: "/Service/ListString", contentType: "application/json", dataType: "json", data: JSON.stringify({ "BuIds": ["1", "2", "3"] }), success: function (jsonResult) { alert(jsonResult); } }); } function postEmployees() { $.ajax({ type: "POST", url: "/Service/Employees", contentType: "application/json", dataType: "json", data: JSON.stringify({ "Employees": [ { "firstName": "Bill", "lastName": "Gates" }, { "firstName": "George", "lastName": "Bush" }, { "firstName": "Thomas", "lastName": "Carter" } ] }), success: function (jsonResult) { alert(jsonResult); } }); }

 

Controller

 [HttpPost] public ActionResult SimpleData(string foo, string bar) { return Json("SimpleData", JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult ListString(List<string> buIds) { return Json("ListString", JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult Employees(List<Employee> Employees) { return Json("Employees", JsonRequestBehavior.AllowGet); } 

public class Employee { public string FirstName { get; set; } public string LastName { get; set; } }

 

結果

 

值得注意的有2點：

1）Ajax 選項中

contentType: "application/json"

 這一條必須寫，代表request的數據類型是json。

而

dataType: "json"

這一條表示返回值的類型，沒必要須，且依據返回值類型而定。

2）選項中

data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' })

 不少時候咱們將數據寫做：

{ 'foo': 'foovalue', 'bar': 'barvalue' }

這樣會致使錯誤，由於js會默認將這個json對象放到表單數據中，故而致使controller接收不到。

有兩種辦法處理：第一種方式是用JSON.stringify()函數，其中JSON被Ecmascript5定義爲全局對象。有關該函數的用法，見此處。

                    第二種方式是直接用雙引號包裹起來，好比data: "{'str1':'foovalue', 'str2':'barvalue'}"。