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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
javascript 原型继承介绍
Aug 30 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
node.js实现登录注册页面
Apr 08 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue实现页面切换滑动效果
Jun 29 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP 远程关机实现代码
2009/11/10 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
超市促销活动方案
2014/03/05 职场文书
工程承包协议书
2014/04/22 职场文书
保险公司演讲稿
2014/09/02 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书