在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. HUE配置文件hue.ini 的yarn_clusters模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  2. sql 获取列名

    --查询所有列 select name from syscolumns where id=OBJECT_ID('PTS_ProjectTask') --列转为行 GetColumnJoin 'Proj ...

  3. php使用date()函数时，提示的警告

    转载:http://www.shangxueba.com/jingyan/121682.html 在用PHP5.3以上的PHP版本时,只要是涉及时间的会报一个: "PHP Warning: ...

  4. 什么是Java序列化？为什么序列化？序列化有哪些方式？

    先普及一下,计算机中无法识别一个基本单元[字节]来表示,必须经过“翻译”才能让计算机理解人类的语言,这个翻译过程就是[编码],通常所说的字符转换为字节.  有I/O的地方机就会涉及编码,现在几乎所有的 ...

  5. golang基础--常量与运算符

    常量与运算符 常量的定义 常量的值在编译时已经确定 常量的定义格式与变量的基本相同 等号的右侧必须是常量或者常量表达式 规范: 常量定义时建议都使用大写,单词之间使用大写 便于包的外部调用 如果只限于 ...

  6. Week6&7——第一次项目冲刺（Alpha版本）

    Deadline: 2017-11-11 10:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分(需求&原型改进与系统设计-10分,敏捷冲刺-70分),检查的项目包括后文的三个方面 ...

  7. MicrosoftOfficeProfessionalPlus2013激活方法

    MicrosoftOfficeProfessionalPlus2013已经使用很久(估计快一年了吧),但一直是未激活状态,每次打开都要弹出那个未激活的提示信息,很烦,但不知道自己怎么能够忍受这么久的, ...

  8. unity游戏热更新总结

    1.利用反射来做Dll更新 这种方式只支持windows以及安卓这种支持JIT的平台,对于IOS就不适用了,IOS这种Full-AOT的平台不支持生成新的代码,因此这种热更方式很少用到.   2.利用 ...

  9. [转]微信小程序之购物车功能

    本文转自:https://www.cnblogs.com/linxin/p/6834206.html 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法 ...

  10. ado.net中事务的使用

    ADO.Net中也提供了事务处理功能,通过ADO.net事务,可以将多个任务绑定在一起,如果所有的任务成功,就提交事务,如果有一个任务失败,就讲滚回事务 执行ADO.Net事务包含四个步骤,接下来以S ...