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+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 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调用自己java程序的方法详解
2016/05/13 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python比较两个列表大小的方法
2015/07/11 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python AES加密模块用法分析
2017/05/22 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
网吧消防安全制度
2014/01/28 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
作文批改评语
2014/12/25 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android