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全屏显示显示代码的三种方法
Nov 11 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python求解汉诺塔游戏
2020/07/09 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
售后专员岗位职责
2013/12/08 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
村班子对照检查材料
2014/08/18 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android