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数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php实现简单洗牌算法
2013/06/18 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
javascript 特殊字符串
2009/02/25 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
详解vue-cli 脚手架 安装
2019/04/16 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
用Python写冒泡排序代码
2016/04/12 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python判断有效的数独算法示例
2019/02/23 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
大一自我鉴定范文
2013/10/04 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
幼儿教育感言
2014/02/05 职场文书
小学端午节活动方案
2014/03/13 职场文书
党员四风剖析材料
2014/08/27 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP