您的位置：首页 > Web前端 > JQuery

Jquery Ajax 提交json数据

2017-08-25 23:15 274 查看

在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:JSON.stringify(persons),
contentType:"application/json;charset=utf-8",
success: function (responseText) {

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

View Code
修改视图后，刷新页面，点击按钮再次发起请求

成功。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航