以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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
原生js实现五子棋游戏
May 28 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部分常见问题总结
2006/10/09 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python字符类型的一些方法小结
2016/05/16 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python中的decimal类型转换实例详解
2019/06/26 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python不同版本的_new_不同点总结
2020/12/09 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
大学生的网上创业计划书
2013/12/31 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
高级编程求职信模板
2014/02/16 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
付款委托书范本
2014/04/04 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python