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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 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 无限分类的树类代码
2009/12/03 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
如何使用angularJs
2017/05/08 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
python中数据库like模糊查询方式
2020/03/02 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
pandas实现导出数据的四种方式
2020/12/13 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
北京大学自荐信范文
2014/01/28 职场文书
孔庙导游词
2015/02/04 职场文书
公司出纳岗位职责
2015/03/31 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
JavaScript分页组件使用方法详解
2021/07/26 Javascript
JavaScript函数柯里化
2021/11/07 Javascript
对讲机知识
2022/04/07 无线电