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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP二维数组去重算法
2016/12/17 PHP
php创建类并调用的实例方法
2019/09/25 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
Python入门篇之字符串
2014/10/17 Python
Python协程的用法和例子详解
2017/09/09 Python
python编写分类决策树的代码
2017/12/21 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
社团活动总结格式
2014/08/29 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
中学政教处工作总结
2015/08/13 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers