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之十一 添加事件核心方法
Jul 31 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
精通JavaScript的this关键字
May 28 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
vue的token刷新处理的方法
Jul 17 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
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
在Django中创建第一个静态视图
2015/07/15 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
PHP统计代码行数的小代码
2019/09/19 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
劳资专员岗位职责
2013/12/27 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
升职自荐信范文
2015/03/27 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript