文档章节

通过Ajax post Json类型的数据到Controller

mac_zhao
 mac_zhao
发布于 2014/10/02 17:46
字数 359
阅读 24
收藏 0

View

复制代码
 function postSimpleData() {
        $.ajax({
            type: "POST",
            url: "/Service/SimpleData",
            contentType: "application/json", //必须有 dataType: "json", //表示返回值类型,不必须 data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' }), //相当于 //data: "{'str1':'foovalue', 'str2':'barvalue'}",  success: function (jsonResult) {
                alert(jsonResult);
            }
        });
    }
    function postListString() {
        $.ajax({
            type: "POST",
            url: "/Service/ListString",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify({ "BuIds": ["1", "2", "3"] }),
            success: function (jsonResult) {
                alert(jsonResult);
            }
        });
    }
    function postEmployees() {
        $.ajax({
            type: "POST",
            url: "/Service/Employees",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify({ "Employees": [
                                    { "firstName": "Bill", "lastName": "Gates" },
                                    { "firstName": "George", "lastName": "Bush" },
                                    { "firstName": "Thomas", "lastName": "Carter" }
                                 ]

            }),
            success: function (jsonResult) {
                alert(jsonResult);
            }
        });
    }
复制代码

 

Controller

复制代码
 [HttpPost] public ActionResult SimpleData(string foo, string bar)
        { return Json("SimpleData", JsonRequestBehavior.AllowGet);
        }

        [HttpPost] public ActionResult ListString(List<string> buIds)
        { return Json("ListString", JsonRequestBehavior.AllowGet);
        }
        [HttpPost] public ActionResult Employees(List<Employee> Employees)
        { return Json("Employees", JsonRequestBehavior.AllowGet);
        } 
复制代码
复制代码
public class Employee
    { public string FirstName { get; set; } public string LastName { get; set; }
    }
复制代码

 

结果

 

值得注意的有2点:

1)Ajax 选项中

contentType: "application/json"

 这一条必须写,表明request的数据类型是json。

dataType: "json"

这一条表示返回值的类型,不必须,且依据返回值类型而定。

2)选项中

data: JSON.stringify({ 'foo': 'foovalue', 'bar': 'barvalue' })

 很多时候我们将数据写作:

{ 'foo': 'foovalue', 'bar': 'barvalue' }

这样会导致错误,因为js会默认将这个json对象放到表单数据中,故而导致controller接收不到。

有两种办法处理:第一种方式是用JSON.stringify()函数,其中JSON被Ecmascript5定义为全局对象。有关该函数的用法,见此处

                    第二种方式是直接用双引号包裹起来,比如data: "{'str1':'foovalue', 'str2':'barvalue'}"。

© 著作权归作者所有

共有 人打赏支持
mac_zhao
粉丝 41
博文 249
码字总数 304671
作品 0
普陀
程序员
SpringMVC Json数据 转换成Object

WEB页面提交一个请求,想把一个Json数据传到controller里面。贴下大概代码 WEB页面Ajax请求 $.ajax({ url:"index/color/update.json", data:arr[0], type:"post", dataType:"json", content...

月沉海雾
2013/03/13
7K
4
springmvc获取axios数据为null情况

场景:前端用了vue没有用ajax与后台通信,用了axios,但是在代码运行过程中发现axios传递到后台的值接受到数据为null。 问题原因:此处的问题在与axios返回给后台的数据为json类型的,后台接...

王子城
06/19
0
0
通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法

现在在做的项目用到了SpringMVC框架,需要从APP接收请求的JSON数据,为了测试方便,所以直接先用AJAX进行测试,不过刚开始用平时用的ajax方法,提交请求会出现415或者400错误,经过研究,终于...

zchuanzhao
2015/10/10
11.7K
4
论如何用JFinal搭建一个上手就能用的RESTful风格后台开发框架

JFinal,重新定义新国货。 目录 JFinal 概述 JFinal 特点 第一个JFinal项目 注意事项 <手动折叠> 一、JFinal概述 JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、...

Leaomato
2016/12/02
67
0
jQuery中$.get、$.post、$.getJSON和$.ajax的用法

1、$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] [, callback] ) 解释一下这个函数的各个参数: url:string类型,ajax请求的地址。 data:可选参数,...

本杰明刘能
2016/11/03
8
0

没有更多内容

加载失败,请刷新页面

加载更多

day96-20180923-英语流利阅读-待学习

英国王子也不看好人工智能,理由却和霍金不同 Daniel 2018-09-23 1.今日导读 2016 年 3 月 9 日至 15 日,世界围棋冠军李世石与谷歌研发的计算机围棋程序 AlphaGo 进行人机大战并以 1 比 4 ...

飞鱼说编程
5分钟前
0
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
10分钟前
3
0
Java -------- 首字母相关排序总结

Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa","CC","Ba","DD","ee","dd"}; Arrays.sort(strings); for (int i ...

切切歆语
12分钟前
0
0
还在用 Git 的 -f 参数强推仓库,你这是在作死!

最近,美国一个程序员因为同事不写注释,代码不规范,最严重的是天天使用 git push -f 参数强行覆盖仓库,该程序员忍无可忍向四名同事开抢,其中一人情况危急!!! 不写注释、代码不规范是一...

红薯
25分钟前
200
0
NPM报错终极大法

所有的错误基本上都跟node的版本相关 直接删除系统中的node 重新安装 sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*} 重新安装 $ n lts$ npm...

lilugirl
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部