通过Ajax post Json类型的数据到Controller

View

    function postSimpleData() {        $.ajax({            type: "POST",            url: "/Service/SimpleData",            contentType: "application/json", //必须有

async: false，// 是否同步            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'}"。