以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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
一段防盗连的PHP代码
2006/12/06 PHP
PHP运行模式的深入理解
2013/06/03 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
在Django框架中编写Contact表单的教程
2015/07/17 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Django 限制访问频率的思路详解
2019/12/24 Python
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
数学兴趣小组活动总结
2014/07/08 职场文书
土建施工员岗位职责
2014/07/16 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
部门主管竞聘书
2015/09/15 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸