以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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
js播放wav文件(源码)
Apr 22 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 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/12/29 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
Angular2库初探
2017/03/01 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python 测试实现方法
2008/12/24 Python
Linux下python制作名片示例
2018/07/20 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python2与Python3的区别实例总结
2019/04/17 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python import 上级目录的导入
2020/11/03 Python
python re.match()用法相关示例
2021/01/27 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
实习自我鉴定范文
2013/10/30 职场文书
党课心得体会范文
2014/09/09 职场文书
文明礼仪倡议书
2015/04/28 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL