以JSON形式将JS中Array对象数组传至后台的方法


Posted in Javascript onJanuary 06, 2014

业务是需要将前台jQuery easyUI DataGrid列表中所选的若干行的数据传到后台进行update操作
以JSON形式将JS中Array对象数组传至后台的方法 

通常情况下我们会获取所选取行对象的ID,通过循环及简单封装拼凑成一个长String传送过去,并在Service层解释再通过findByID获取实例并update

但今次我们需要将整个对象群完整的传输至后台

其结构如下
以JSON形式将JS中Array对象数组传至后台的方法 

选用谷歌的GSON插件及json2.js搭配使用

前台代码如下,简洁起见已去除部分简单验证代码:

var rows = $('#dg1').datagrid('getSelections'); 

$.ajax({ 

cache : false, 

type : "POST", 

url : _basePath + '/sectionGroup/pair', 

data : {rows : JSON.stringify(rows), group_id : group_id, group_name : group_name}, 

success : function(data) { 

if(data.success == true){ 

$.messager.confirm('配置成功','是否刷新列表?', function(r){ 

if (r){ 

$('#dg').datagrid('reload'); 

$('#dg1').datagrid('reload'); 

$('#dg2').datagrid('reload'); 

} 

}); 

}else{ 

$.messager.show({ 

title:'提示',msg:'配置失败', 

showType:'fade',style:{right:'',bottom:''} 

}); 

} 

} 

});

此页面中需要引入json2.js

后台Controller中接收如下:

@RequestMapping(value = "/pair") 

@ResponseBody 

public ResponseData pair(String rows, String group_name, String group_id, HttpServletRequest request) { 

User user = (User) SecurityContextUtil.getCurrentUser(); 

if (user == null) { 

user = (User) request.getSession().getAttribute(Constants.USER_OS); 

} 

Gson gson = new Gson(); 

List<SectionGroup> list = gson.fromJson(rows, new TypeToken<List<SectionGroup>>() {}.getType()); 

for (SectionGroup sectionGroup : list) { 

sectionGroup.setRegion(user.getRegion_id()); 

sectionGroup.setCompany_id(user.getOrg_id()); 

sectionGroup.setGroup_id(group_id); 

sectionGroup.setGroup_name(group_name); 

service.insertEntity(sectionGroup); 

} 

return ResponseData.SUCCESS_NO_DATA; 

}

其中GSON及TypeToken为GSON包中引入类

入参rows应为String型

经过Gson转换后List依旧为普通接口,内部装载前台完整的Object对象

Javascript 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
Javascript基础教程之变量
Jan 18 Javascript
js实现拖拽效果
Feb 12 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 #Javascript
instanceof和typeof运算符的区别详解
Jan 06 #Javascript
jquery使用append(content)方法注意事项分享
Jan 06 #Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 #Javascript
Javascript 遍历页面text控件详解
Jan 06 #Javascript
jquery链式操作的正确使用方法
Jan 06 #Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 #Javascript
You might like
深入PHP autoload机制的详解
2013/06/09 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
开业庆典答谢词
2014/01/18 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
和解协议书
2014/04/16 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
开票证明
2015/06/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android