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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
基于JSON数据格式详解
Aug 31 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
three.js实现圆柱体
Dec 30 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
javascript数据类型详解
2017/02/07 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
vue实现商城购物车功能
2017/11/27 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python入门篇之字典
2014/10/17 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python实现kmp算法的实例代码
2019/04/03 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python爬取招聘要求等信息实例
2020/11/20 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
解决方案设计综合面试题
2015/08/31 面试题
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
青年文明号创建承诺
2014/03/31 职场文书
公司副总经理任命书
2014/06/05 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
工程质量保证书
2015/05/09 职场文书
员工担保书范本
2015/09/22 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书