以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 相关文章推荐
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
幼儿园大班评语大全
2014/04/17 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
介绍信的格式
2015/01/30 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
JavaScript的Set数据结构详解
2022/02/18 Javascript