Angular.js前台传list数组由后台spring MVC接收数组示例代码


Posted in Javascript onJuly 31, 2017

前言

本文主要给大家介绍了关于Angular.js前台传list数组由后台spring MVC接收数组的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧。

在开发中有时候需要在前台自定义对象,然后把对象封装在list中,在传送到后台,这样的思想也比较合理,直接来看示例代码:

1. 前台代码

$scope.saveScore = function () {

 $scope.userScoreList = new Array();//自定义数组

 angular.forEach ($scope.records, function (record, index) {

   

  if (record.score != null) {

   $scope.userScoreModel = {'userAnswerId': null,'score': null};//自定义对象结构

   $scope.userScoreModel.userAnswerId = record.userAnswerId;//赋值

   $scope.userScoreModel.score = record.score;

    

   $scope.userScoreList.push($scope.userScoreModel);//把对象封装在集合中

   debugger;

  }

 });

  

 if ($scope.userScoreList != null && $scope.userScoreList.length > 0) {

  var fd = new FormData();// 使用angularJS的FormData封装要传送的数据

  var userScoreRecords = angular.toJson($scope.userScoreList);//把对象(集合)转换为json串

  fd.append('userScoreRecords', userScoreRecords);//参数放入formData中

  debugger;//使用 debugger模式查看传值情况

  $http.post('/reviewProcess/save', fd, { //使用post方法 传送formdata对象

   transformRequest: angular.identity, //使用angular传参认证

   headers: {

    'Content-Type': undefined //设置请求头

   }

  })

  .success(function (data){

   toastr.success("success");

  })

  .error(function (data) {

   toastr.success("failed");

  });

 }

};

2. 后台接收

@ResponseBody

 @RequestMapping(value = "/reviewProcess/save", method = RequestMethod.POST)

 public void saveUserScore (@RequestParam("userScoreRecords") String userScoreRecords) { //使用requestparam接收前台传送的json串

  System.out.println(userScoreRecords);

  ObjectMapper mapper = new ObjectMapper(); // 使用fastJson的ObjectMapper反序列化json串为对象

  UserScoreModel record = null;

  try {

   JSONArray jsonArray = new JSONArray (userScoreRecords); //在后台把json串转换为json数组

   for (int i =0; i < jsonArray.length(); i++) {

    record = mapper.readValue(jsonArray.getJSONObject(i).toString(), UserScoreModel.class); //获取json数组的json对象并且反序列化为对应的对象

    System.out.println(record); // 得到对象后后台即可操作

   }

  } catch (Exception e) {

   logger.error(e.getMessage(), e);

  }

 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
JS模板实现方法
Apr 03 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 #Javascript
BootStrap导航栏问题记录
Jul 31 #Javascript
Angular4 中内置指令的基本用法
Jul 31 #Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 #Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 #Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 #Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 #Javascript
You might like
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js中哈希表的几种用法总结
2014/01/28 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python代码过长的换行方法
2018/07/19 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
django连接oracle时setting 配置方法
2019/08/29 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python基于当前时间批量创建文件
2020/05/07 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
数学教学随笔感言
2014/02/17 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
体育活动总结
2015/02/04 职场文书
应急管理工作总结2015
2015/05/04 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
导游词之西递宏村
2019/12/10 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL