spirngmvc js传递复杂json参数到controller的实例


Posted in Javascript onMarch 29, 2018

Spring MVC在接收集合请求参数时,需要在Controller方法的集合参数里前添加@RequestBody,而@RequestBody默认接收的enctype (MIME编码)是application/json,因此发送POST请求时需要设置请求报文头信息,否则Spring MVC在解析集合请求参数时不会自动的转换成JSON数据再解析成相应的集合。

以下列举接收List<String>、List<User>、List<Map<String,Object>>、User[]、User(bean里面包含List)几种较为复杂的集合参数示例:

接收List<String>集合参数:

1、页面js代码:

var idList = new Array(); 
idList.push(“1”); 
idList.push(“2”); 
idList.push(“3”); 
var isBatch = false; 
$.ajax({ 
 type: "POST", 
 url: "<%=path%>/catalog.do?fn=deleteCatalogSchemes", 
 dataType: 'json', 
 data: {"idList":idList,"isBatch":isBatch}, 
 success: function(data){ 
  … 
 }, 
 error: function(res){ 
  … 
 } 
});

2、Controller方法:

@Controller 
@RequestMapping("/catalog.do") 
public class CatalogController { 
 
 @RequestMapping(params = "fn=deleteCatalogSchemes") 
 @ResponseBody 
 public AjaxJson deleteCatalogSchemes(@RequestParam("idList[]") List<String> idList,Boolean isBatch) { 
   … 
 } 
}

接收List<User>、User[]集合参数:

1、User实体类:

public class User { 
  private String name; 
 private String pwd; 
 //省略getter/setter 
}

2、页面js代码:

var userList = new Array(); 
userList.push({name: "李四",pwd: "123"}); 
userList.push({name: "张三",pwd: "332"}); 
$.ajax({ 
 type: "POST", 
 url: "<%=path%>/catalog.do?fn=saveUsers", 
 data: JSON.stringify(userList),//将对象序列化成JSON字符串 
 dataType:"json", 
 contentType : 'application/json;charset=utf-8', //设置请求头信息 
 success: function(data){ 
  … 
 }, 
 error: function(res){ 
  … 
 } 
});

3、Controller方法:

@Controller 
@RequestMapping("/catalog.do") 
public class CatalogController { 
 
 @RequestMapping(params = "fn=saveUsers") 
 @ResponseBody 
 public AjaxJson saveUsers(@RequestBody List<User> userList) { 
  … 
 } 
}

如果想要接收User[]数组,只需要把saveUsers的参数类型改为@RequestBody User[] userArray就行了。

接收List<Map<String,Object>>集合参数:

1、页面js代码(不需要User对象了):

var userList = new Array(); 
userList.push({name: "李四",pwd: "123"}); 
userList.push({name: "张三",pwd: "332"}); 
$.ajax({ 
 type: "POST", 
 url: "<%=path%>/catalog.do?fn=saveUsers", 
 data: JSON.stringify(userList),//将对象序列化成JSON字符串 
 dataType:"json", 
 contentType : 'application/json;charset=utf-8', //设置请求头信息 
 success: function(data){ 
  … 
 }, 
 error: function(res){ 
  … 
 } 
});

2、Controller方法:

@Controller 
@RequestMapping("/catalog.do") 
public class CatalogController { 
 
 @RequestMapping(params = "fn=saveUsers") 
 @ResponseBody 
 public AjaxJson saveUsers(@RequestBody List<Map<String,Object>> listMap) { 
  … 
 } 
}

接收User(bean里面包含List)集合参数:

1、User实体类:

public class User { 
 private String name; 
 private String pwd; 
 private List<User> customers;//属于用户的客户群 
 //省略getter/setter 
}

2、页面js代码:

var customerArray = new Array(); 
customerArray.push({name: "李四",pwd: "123"}); 
customerArray.push({name: "张三",pwd: "332"}); 
var user = {}; 
user.name = "李刚"; 
user.pwd = "888"; 
user. customers = customerArray; 
$.ajax({ 
 type: "POST", 
 url: "<%=path%>/catalog.do?fn=saveUsers", 
 data: JSON.stringify(user),//将对象序列化成JSON字符串 
 dataType:"json", 
 contentType : 'application/json;charset=utf-8', //设置请求头信息 
 success: function(data){ 
  … 
 }, 
 error: function(res){ 
  … 
 } 
});

3、Controller方法:

@Controller 
@RequestMapping("/catalog.do") 
public class CatalogController { 
 
 @RequestMapping(params = "fn=saveUsers") 
 @ResponseBody 
 public AjaxJson saveUsers(@RequestBody User user) { 
  List<User> customers = user.getCustomers(); 
  … 
 } 
}

以上这篇spirngmvc js传递复杂json参数到controller的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Date概念详细介绍
Nov 22 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
关于vue-router路径计算问题
May 10 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
微信小程序入门之指南针
Oct 22 Javascript
Vue.js 表单控件操作小结
Mar 29 #Javascript
js传递数组参数到后台controller的方法
Mar 29 #Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 #Javascript
Vue项目中如何引入icon图标
Mar 28 #Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 #Javascript
javascript性能优化之分时函数的介绍
Mar 28 #Javascript
Vue数据监听方法watch的使用
Mar 28 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python中的decorator的作用详解
2018/07/26 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
十八大感想感言
2014/02/10 职场文书
外贸专业求职信
2014/03/09 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
历史学专业求职信
2014/06/19 职场文书
天猫活动策划方案
2014/08/21 职场文书
教师节标语大全
2014/10/07 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年团队工作总结
2014/11/24 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
齐云山导游词
2015/02/06 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python