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 相关文章推荐
jquery if条件语句的写法
May 19 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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使用eAccelerator的API开发详解
2013/06/09 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
详解webpack解惑:require的五种用法
2017/06/09 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
python多维数组切片方法
2018/04/13 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python使用多进程的实例详解
2018/09/19 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
心得体会开头
2014/01/01 职场文书
《阳光》教学反思
2014/02/23 职场文书
就业协议书的作用
2014/04/11 职场文书
运动会拉拉队口号
2014/06/09 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014年医务科工作总结
2014/12/18 职场文书
信访工作个人总结
2015/03/03 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
MySQL 四种连接和多表查询详解
2021/07/16 MySQL