AjaxJquery Ajax 提交json数据

在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法

[HttpPost]
public ActionResult CreateOrder(List<Person> model)
{
    return View();
}

其中Person类如下:

public class Person
{
    public string Name { get; set; }

    public string IDCard { get; set; }
}

此处仿佛购买火车票的一个场所,购买票的时候要求提供具有乘车人的信息(姓名、身份证号码)

前台视图的代码如下:

Ajax 1Ajax 2

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOrder</title>
</head>
<body>
    <input type="button" value="提交订单" id="btnSubmit" />
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: '@Url.Action("CreateOrder","Test")',
                    type: 'POST',
                    data: persons,
                    success: function (responseText) {

                    }
                });
            });
        });
    </script>
</body>
</html>

View
Code

点击按钮时发起Ajax请求,提交json数据,json数据包含了两位乘客信息(这里只是演示数据的付出,不探究身份证编号的合法性)

当点击按钮时,在开发人士工具中看出发起了Ajax请求,可是表单数据不是json数据

Ajax 3

 

 

而在调节中也可以监视到参数model是null

Ajax 4

 

从开发人士工具中得以看到,请求头是Content-Type:application/x-www-form-urlencoded;
charset=UTF-8 ,而实质上应该是Content-Type:application/json;
charset=UTF-8

于是对视图作修改:

Ajax 5Ajax 6

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOrder</title>
</head>
<body>
    <input type="button" value="提交订单" id="btnSubmit" />
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: '@Url.Action("CreateOrder","Test")',
                    type: 'POST',
                    data:JSON.stringify(persons),
                    contentType:"application/json;charset=utf-8",
                    success: function (responseText) {

                    }
                });
            });
        });
    </script>
</body>
</html>

View
Code

修改视图后,刷新页面,点击按钮再度发起呼吁

Ajax 7

 

Ajax 8

 

Ajax 9

成功。

留意:jquery
ajax请求中设置了contentType之后,需要将参数data设置为json字符串,使用JSON.stringify(),否则提交时会指示如下:

Ajax 10

 

相关文章