Jquery 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; }
}
这里类似购买火车票的一个场景,购买票的时候要求提供所有乘车人的信息(姓名、身份证号码)
前台视图的代码如下:
@{
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() ,否则提交时会提示如下:
Jquery Ajax 提交json数据的更多相关文章
- jQuery.ajax提交JSON数据
$.ajax({ type: 'POST', url: "URL", contentType:'application/json', //需要加contentType crossD ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- ajax提交json数据到后端C#解析
本文链接:https://blog.csdn.net/qq_22103321/article/details/78015920 前端提交json数据 $.ajax({ type: "post ...
- jquery ajax提交json格式的数据,后台接收并显示各个属性
我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...
- jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery,ajax返回json数据后呈现到html页面的$.post方式。
------------------------------------------------------完整版------------------------------------------- ...
- Jquery-ajax()方法提交json数据
1.ajax()提交json数据代码 var strJson = getStrPayJson(); $.ajax({ type: "POST", url: "/userc ...
- jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
随机推荐
- Linux-(diff)
diff 命令 1.命令格式: diff [参数] [文件1或目录1] [文件2或目录2] 2.命令功能: diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时 ...
- php在浏览器禁止cookie后,仍然能使用session的方法
1.a.php页面 session_start(); $_SESSION['msg'] = "i love you"; $sn = session_id();//获取当前sessi ...
- C#对json数据的解析
一,基础知识 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...
- golang基础--细说defer
defer 匿名函数特性 执行方式类似其它语言中的析构函数,在函数体执行结束后按照调用顺序的相反顺序逐个执行 //执行顺序相反 package main import "fmt" ...
- RabbitMQ上手记录–part 2 - 安装RabbitMQ
上一篇<<RabbitMQ 上手记录-part 1>>介绍了一些基础知识,整理了一些基础概念.接下来整理一些安装步骤和遇到的问题. 我在CentOS7和Ubuntu16.4上都 ...
- orcle查询记录的每天的第一条
select * from ( select elec,time,Row_Number() OVER (partition by trunc(TIME) order by time) ran ...
- unity 中 Tilemap的使用 笔记
Coordinate 坐标 创建顺序: Sprite Palette(调色板) Tile Brush Tilemap(瓦片地图) 1.创建画板:保存路径:Palettes/Basic/BasicGro ...
- 关于C#判断是否是数字的正则式
有话要说 今天我同事突然让我帮他看个问题,他说想不通为什么数据库中会有不合法的内容,我都已经用正则过滤了,并且在本地调通了的! 我问他是不是你正则有问题,他说没问题啊,前端和后端的正则是一样的,前端我 ...
- 斐波那契堆(Fibonacci heap)原理详解(附java代码实现)
前言 斐波那契堆(Fibonacci heap)是计算机科学中最小堆有序树的集合.它和二项式堆有类似的性质,但比二项式堆有更好的均摊时间.堆的名字来源于斐波那契数,它常用于分析运行时间. 堆结构介绍 ...
- 浅谈equals和==
在java中equals和==都是用来作比较的,可是你知道他们之间有什么区别和联系吗? 首先,在Object类中,本质上equals和==都是一样的,如果查看源码,你会发现这里面equals的内部实现 ...