以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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
node中koa中间件机制详解
Aug 22 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python数据可视化图实现过程详解
2020/06/12 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
火山动力Java笔试题
2014/06/26 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
党建示范点实施方案
2014/03/12 职场文书
班主任新年寄语
2014/04/04 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android