以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 相关文章推荐
关于js注册事件的常用方法
Apr 03 Javascript
javascript页面倒计时实例
Jul 25 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
vue vant中picker组件的使用
Nov 03 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php导入导出excel实例
2013/10/25 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
vue实现简单图片上传
2020/06/30 Javascript
详解Python中break语句的用法
2015/05/14 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python操作qml对象过程详解
2019/09/26 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
virtualenv介绍及简明教程
2020/06/23 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
初中毕业生的自我评价
2014/03/03 职场文书
工程承包协议书
2014/04/22 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
经费申请报告
2015/05/15 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
Fluentd搭建日志收集服务
2022/09/23 Servers