以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 相关文章推荐
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
JS分页效果示例
Oct 11 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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
实用函数2
2007/11/08 PHP
PHP高级OOP技术演示
2009/08/27 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python eval函数原理及用法解析
2020/11/14 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
先进集体事迹材料
2014/02/17 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
法人代表委托书
2014/04/04 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
期末个人总结范文
2015/02/13 职场文书
学校通报表扬范文
2015/05/04 职场文书
《穷人》教学反思
2016/02/19 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python