JqueryAjax提交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; }
}
这⾥类似购买⽕车票的⼀个场景，购买票的时候要求提供所有乘车⼈的信息（姓名、⾝份证号码）
前台视图的代码如下：
@{
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数据
⽽在调试中也可以监视到参数model是null
从开发⼈员⼯具中可以看到，请求头是Content-Type:application/x-www-form-urlencoded; charset=UTF-8 ，⽽实际应该是Content-Type:application/json; charset=UTF-8
于是对视图作修改：
@{jquery实现ajax
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
修改视图后，刷新页⾯，点击按钮再次发起请求
成功。
注意：jquery ajax请求中设置了contentType之后，需要将参数data设置为json字符串，使⽤JSON.stringify() ，否则提交时会提⽰如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。