在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数据的更多相关文章

  1. jQuery.ajax提交JSON数据

    $.ajax({ type: 'POST', url: "URL", contentType:'application/json', //需要加contentType crossD ...

  2. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  3. ajax提交json数据到后端C#解析

    本文链接:https://blog.csdn.net/qq_22103321/article/details/78015920 前端提交json数据 $.ajax({ type: "post ...

  4. jquery ajax提交json格式的数据，后台接收并显示各个属性

    我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...

  5. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Jquery,ajax返回json数据后呈现到html页面的$.post方式。

    ------------------------------------------------------完整版------------------------------------------- ...

  7. Jquery-ajax()方法提交json数据

    1.ajax()提交json数据代码 var strJson = getStrPayJson(); $.ajax({ type: "POST", url: "/userc ...

  8. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  9. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

随机推荐

  1. Maven 学习笔记(一)

    什么是 maven? 对于已经使用过 maven 的用户来说 maven 就是一个架构工具,使用它可以将代码构建成一个可发布的工具.当然也有人会说maven是一个项目管理的工具.当然各有各的说法,那么 ...

  2. 机器学习中规范化项：L1和L2

    规范化(Regularization) 机器学习中几乎都可以看到损失函数后面会添加一个额外项,常用的额外项一般有两种,一般英文称作ℓ1-norm和ℓ2-norm,中文称作L1正则化和L2正则化,或者L ...

  3. 06-python中的装饰器

    java类中, 有一系列的装饰器, 尤其对文件的操作, python的装饰器比较简单, 直接上代码 #!/usr/bin/env python3 #coding:utf- ''' python的装饰器 ...

  4. MyEclipse2014破解方法

    之前一直使用的MyEclipse2014过期了,无奈之下只能在网上搜怎么破解,结果很管用,在这里记录并和大家分享 https://jingyan.baidu.com/article/fdbd42771 ...

  5. Hadoop提交作业流程

    一 .需要知道的内容 1.ResourceManager ------>yarn的老大 2.NodeManager        ------>yarn的小弟 3.ResourceMana ...

  6. git常用命令小记

    git status 查看缓存区和工作区的状态 +表示N个新文件 ~表示N个修改 -表示N个删除 两组的时候前面的是暂存区,后面的是工作区 git add fileName 变更文件状态(工作区--& ...

  7. Java8常用新特性实践

    前言: 时下Oracle开速迭代的Java社区以即将推出Java10,但尴尬的是不少小中企业仍使用JDK7甚至JDK6开发. 从上面列出的JDK8特性中我们可以发现Java8的部分特性很明显的是从Sc ...

  8. django2.1---中间件

    在http请求 到达视图函数之前   和视图函数return之后,django会根据自己的规则在合适的时机执行中间件中相应的方法. Django1.9版本以后中间件的执行流程 1.执行完所有的requ ...

  9. VM CentOS 问题汇总

    1. 锁定文件失败 / 模块启动失败 如下图问题: 原因分析: 虚拟机为了防止有多虚拟机共用一个虚拟磁盘(就是后 缀为.vmdk那个文件)造成数据的丢失等问题,每次启动虚拟机时会给每个虚拟磁盘加一个磁 ...

  10. Git报错：error: cannot open .git/FETCH_HEAD: Read-only file system

    Git:git pull时报错 error: cannot open .git/FETCH_HEAD: Read-only file system 查看该文件: 未在网上找到解决办法,重启服务器就好了 ...