在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; } }
這里類似購買火車票的一個場景，購買票的時候要求提供所有乘車人的信息（姓名、身份證號碼）
前台視圖的代碼如下：
@{ 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>
點擊按鈕時發起Ajax請求，提交json數據，json數據包含了兩位乘客信息(這里只是演示數據的提交，不討論身份證號碼的合法性)
當點擊按鈕時，在開發人員工具中看到發起了Ajax請求，但是表單數據不是json數據
而在調試中也可以監視到參數model是null
從開發人員工具中可以看到，請求頭是Content-Type:application/x-www-form-urlencoded; charset=UTF-8 ，而實際應該是Content-Type:application/json; charset=UTF-8
於是對視圖作修改：
@{ 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>
修改視圖后，刷新頁面，點擊按鈕再次發起請求
成功。
注意：jquery ajax請求中設置了contentType之后，需要將參數data設置為json字符串，使用JSON.stringify() ，否則提交時會提示如下：
