以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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
vue中轮训器的使用
Jan 27 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中pass语句用法实例分析
2015/04/30 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python实现IOU计算案例
2020/04/12 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
初中科学教学反思
2014/01/21 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android