以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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
js数组的操作指南
Dec 28 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 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
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
让焦点自动跳转
2006/07/01 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
详解Vue源码学习之双向绑定
2019/04/10 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python的re正则表达式实例代码
2018/01/24 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
对Python信号处理模块signal详解
2019/01/09 Python
详解Python的三种拷贝方式
2020/02/11 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
合同专员岗位职责
2013/12/18 职场文书
实习鉴定评语
2014/01/19 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
python全面解析接口返回数据
2022/02/12 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA