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练习之表单验证实现代码
Dec 14 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue-router传参用法详解
2019/01/19 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
举例详解Python中的split()函数的使用方法
2015/04/07 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
解决Mac下使用python的坑
2019/08/13 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python配置文件处理的方法教程
2019/08/29 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
2014自荐信的写作技巧
2014/01/28 职场文书
感恩节活动策划方案
2014/05/16 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
中秋客户感谢信
2015/01/22 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Apache自带的ab压力测试工具的实现
2022/07/23 Servers