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 相关文章推荐
Javascript中的相等与不等运算
Apr 25 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
js异步编程小技巧详解
Aug 14 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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
数字转英文
2006/12/06 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Angular2之二级路由详解
2018/08/31 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python实现二叉搜索树
2016/02/03 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python批量发送post请求的实现代码
2018/05/05 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
怎样写离婚协议书
2015/01/26 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书