以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 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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
珊瑚虫IP库浅析
2007/02/15 PHP
PHP连接access数据库
2008/03/27 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
详解如何较好的使用js
2016/12/16 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python发送Email方法实例
2014/08/21 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
详解Python文件修改的两种方式
2019/08/22 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python设置表格边框的具体方法
2020/07/17 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
大班开学家长寄语
2014/04/04 职场文书
新员工考核评语
2014/12/31 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
中秋联欢会主持词
2015/07/04 职场文书