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之选项卡的简单实现
Feb 28 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
vue项目打包后路由错误的解决方法
Apr 13 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 Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python实现简单多人聊天室
2018/12/11 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python实现文字版扫雷
2020/04/24 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
大专生求职信
2014/06/29 职场文书
护理专科学生自荐书
2014/07/05 职场文书
国际贸易实训报告
2014/11/05 职场文书
保证书格式
2015/01/16 职场文书
项目验收申请报告
2015/05/15 职场文书
大学学生会竞选稿
2015/11/19 职场文书