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 window.setTimeout() 的详细用法
Nov 04 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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 面向对象详解
2012/09/13 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php购物车实现方法
2015/01/03 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
利用python代码写的12306订票代码
2015/12/20 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
机械系毕业生求职信
2014/05/28 职场文书
实习单位鉴定意见
2015/06/04 职场文书
高一作文之乐趣
2019/11/21 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python