Angular.js前台传list数组由后台spring MVC接收数组示例代码

 更新时间:2017年07月31日 10:11:59   作者:果感  
这篇文章主要给大家介绍了关于Angular.js前台传list数组之后,由后台spring MVC接收数组的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。

前言

本文主要给大家介绍了关于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);

  }

 } 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持

相关文章

  • 基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解)

    基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解

    最近在学习 angular,记录一下昨天的进展,解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色,避免对色彩的硬编码,这篇文章主要介绍了基于 angular material theming 机制修改 mat-toolbar 的背景色,需要的朋友可以参考下
    2022-10-10
  • AngularJS打开页面隐藏显示表达式用法示例

    AngularJS打开页面隐藏显示表达式用法示例

    这篇文章主要介绍了AngularJS打开页面隐藏显示表达式用法,结合实例形式分析了AngularJS中打开页面隐藏显示表达式相关命令使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angularjs 根据一个select的值去设置另一个select的值方法

    Angularjs 根据一个select的值去设置另一个select的值方法

    今天小编就为大家分享一篇Angularjs 根据一个select的值去设置另一个select的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angular ViewChild组件间通信demo

    Angular ViewChild组件间通信demo

    这篇文章主要为大家介绍了Angular ViewChild组件间通信demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 浅谈Angular2 模块懒加载的方法

    浅谈Angular2 模块懒加载的方法

    本篇文章主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Angular中的NgZone.run()有什么用途

    Angular中的NgZone.run()有什么用途

    在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧
    2024-01-01
  • Angularjs过滤器实现动态搜索与排序功能示例

    Angularjs过滤器实现动态搜索与排序功能示例

    这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下
    2017-12-12
  • Angular应用里异步打开对话框技术详解

    Angular应用里异步打开对话框技术详解

    这篇文章主要为大家介绍了Angular应用里异步打开对话框技术详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • AngularJS语法详解(续)

    AngularJS语法详解(续)

    本文续上文,接着介绍AngularJS语法,和上文一样,都是通过示例来向大家分析说明,非常不错的一篇文章,推荐给大家。
    2015-01-01
  • AngularJS基于factory创建自定义服务的方法详解

    AngularJS基于factory创建自定义服务的方法详解

    这篇文章主要介绍了AngularJS基于factory创建自定义服务的方法,结合实例形式分析了AngularJS使用factory创建自定义服务的具体步骤、操作技巧与相关注意事项,需要的朋友可以参考下
    2017-05-05

最新评论