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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js分页工具实例
Jan 28 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
js实现登录与注册界面
Nov 01 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 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将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP7.0版本备注
2015/07/23 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
公司道歉信范文
2014/01/09 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL