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获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
jQuery实现滚动效果
Nov 17 jQuery
动态加载JavaScript文件的3种方式
May 05 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
vue的hash值原理也是table切换实例代码
Dec 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 获取select下拉列表框的值
2010/05/08 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php实现的用户查询类实例
2015/06/18 PHP
php简单复制文件的方法
2016/05/09 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
原生js实现商品筛选功能
2019/10/28 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
python try...finally...的实现方法
2020/11/25 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
法学专业本科生自荐信范文
2013/12/17 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android