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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
js实现文字选中分享功能
Jan 25 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
ES6 Generator函数的应用实例分析
Jun 26 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+MySql编写聊天室
2006/10/09 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
JS 表单验证大全
2011/11/23 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
深入解析Python中的上下文管理器
2016/06/28 Python
Python selenium文件上传方法汇总
2020/11/19 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python常用数据重复项处理方法
2019/11/22 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python实现自动访问网页的例子
2020/02/21 Python
python 19个值得学习的编程技巧
2020/08/15 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
卫校中专生个人自我评价
2013/09/19 职场文书
绘画设计学生的个人自我评价
2013/09/20 职场文书
矫正人员思想汇报
2014/01/08 职场文书
酒鬼酒广告词
2014/03/21 职场文书
物流管理专业自荐信
2014/06/23 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
信仰纪录片观后感
2015/06/08 职场文书