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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
vue router 配置路由的方法
Jul 26 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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的宝库目录--PEAR
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vue二级路由设置方法
2018/02/09 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
客户服务经理岗位职责
2014/01/29 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
人民调解协议书范本
2014/10/11 职场文书
毕业生对母校寄语
2015/02/26 职场文书
老干部座谈会主持词
2015/07/03 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
MySQL 计算连续登录天数
2022/05/11 MySQL