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 定位input元素的几种方法小结
Jul 28 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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中的事务使用实例
2015/05/26 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JavaScript学习笔记之Function对象
2015/01/22 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
python表格存取的方法
2018/03/07 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Django重设Admin密码过程解析
2020/02/10 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
社区科普工作方案
2014/06/03 职场文书
工程售后服务方案
2014/06/08 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
世界遗产的导游词
2015/02/13 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python