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 中对象的继承〔转贴〕
Jan 22 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Vue组件中slot的用法
Jan 30 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
layui关闭层级、简单监听的实例
Sep 06 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 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计算两个路径的相对路径
2013/06/14 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python列表与元组详解实例
2013/11/01 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
未中标通知书
2015/04/17 职场文书
党员身份证明材料
2015/06/19 职场文书
志愿服务心得体会
2016/01/15 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers