文档章节

通过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'}"。

© 著作权归作者所有

共有 人打赏支持
下一篇: openfire
mac_zhao
粉丝 42
博文 249
码字总数 304671
作品 0
普陀
程序员
私信 提问
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
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
7.4K
4
论如何用JFinal搭建一个上手就能用的RESTful风格后台开发框架

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

Leaomato
2016/12/02
67
0
shenzhanwang/Spring-REST

Spring-REST 如果说Web Service是一种特殊的RPC,那么REST Service又是一种特殊的Web Service,目前已成为分布式通信的重要手段。本项目基于Spring框架,完成REST风格的接口的发布(Server)与...

shenzhanwang
2017/02/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

eslint rules 规则

'rules': { "comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号 "no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符 "no-console": 2, //不允许出现console语句 ...

agenyun
31分钟前
1
0
类型判断时instanceof和equals的不同用法

接口设计时为了避免序列化的麻烦,将接口定义为参数为map<String,String>类型的接口,但是现在调用时需要转换当前的实体Bean为Map,接口接收方再把Map转换为另一个Bean实体。过程中的需要对类...

wangtx
37分钟前
1
0
vue 组件间传值(个人精编)

1.父组件向子组件传值 1⃣️.子组件标签绑定需要传递的参数名2⃣️.子组件页面使用props 接收参数 2.子组件向父组件传值  1⃣️.子组件使用$emit来触发一个自定义事件,并传递一个参...

MrBoyce
47分钟前
1
0
(荷兰)彼得·冯·门施著:博物馆学研究的目的

博物馆学研究的目的 (荷)彼得·冯·门施 尽管诸多关于博物馆学认知目的的不同看法可以被归纳为数个主要群体,但没有一个群体可以被称为“学派”。一般来说,学派是由于博物馆学研究目的的不...

乔老哥
57分钟前
2
0
Vue slot的用法

之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了,使用slot就是先圈一块地,将来...

peakedness丶
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部