以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 相关文章推荐
Extjs入门之动态加载树代码
Apr 09 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
javascript无刷新评论实现方法
May 13 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
js实现弹幕飞机效果
Aug 27 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
初识php MVC
2014/09/10 PHP
鼠标图片振动代码
2006/07/06 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
解决python写的windows服务不能启动的问题
2014/04/15 Python
详解python基础之while循环及if判断
2017/08/24 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python自动生成model文件过程详解
2019/11/02 Python
python实现XML解析的方法解析
2019/11/16 Python
Python Lambda函数使用总结详解
2019/12/11 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Python定义一个Actor任务
2020/07/29 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
英国团购网站:Groupon英国
2017/11/28 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
测量实习生自我鉴定
2013/09/19 职场文书
设计毕业生简历中的自我评价
2013/10/01 职场文书
成人大专生实习期的自我评价
2013/10/02 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
安全协议书范本
2014/04/21 职场文书
推广普通话演讲稿
2014/05/23 职场文书
科学发展观演讲稿
2014/09/11 职场文书
健康状况证明书
2014/11/26 职场文书
司机岗位职责
2015/02/04 职场文书
业务员年终工作总结2015
2015/05/28 职场文书