通过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": ["", "", ""] }),
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; }
}

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

值得注意的有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'}"。

上一篇:快乐的JS正则表达式(一)


下一篇:pycharm设置python脚本模板