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 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
原生js实现下拉框选择组件
Jan 20 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
护士辞职信范文
2014/01/19 职场文书
趣味活动策划方案
2014/02/08 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
班级口号大全
2014/06/09 职场文书
学校节能减排方案
2014/06/13 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Python入门之基础语法详解
2021/05/11 Python
Python实现双向链表
2022/05/25 Python