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);

  }

 } 

总结

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

时间: 2017-07-28

AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="

详解AngularJs与SpringMVC简单结合使用

最近在学习AngularJS的知识,收获不少,不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互,所以也自然想到了用angularjs+springmvc来做同样的事情.当然,在学习之前也到网上查阅了非常多的资料,但是都不是那么明细或者简单,至少对于本人来说都是看的是一知半解.所以用了些时间对这种方式进行学习. 在查阅了许多的资料以后,大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台,这点和Ajax比较类似,当然

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map<String, Object> save( @RequestParam(value = "isform", required = false) String isform) { System.out.println("isform value

解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

写此文的背景:在学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法. 写此文的目的:通过上面提到的文章中的解决之道,结合自己的经验,总结了如下发现. 前端:html,jquery,angular 后端:java,springmvc 一.平常使用的post提交和接收方式 前端使用jquery提交数据. $.ajax({ url:'/carlt/loginForm', method: 'POST', data:{"name":&

解决表单post,get到springMVC后台乱码的问题

一. 前台表单直接post或get,后台以request.getParameterMap()或request.getParameter()的形式接收 注意:前台,springmvc过滤器,以及jsp,编译器编码全部以utf-8为例 以request.getParameterMap()为例 注意:这里是一个从HttpServletRequest中获取参数的方法,至于request则是从类似于 @RequestMapping("/tradePortal/ReceiveCommands")

解决SpringMvc后台接收json数据中文乱码问题的几种方法

1.使用ajax从前台页面传输数据到后台controller控制器的时候,出现中文乱码(问号???). 之前在网上找了各种解决方案,都行不通,最后发现是tomcat服务器接收数据的问题 解决方案: 方式一:在controller接收参数时,对参数进行转码 @ResponseBody @RequestMapping(value="/getJsonDataByCityName",produces="application/json") public String get

SpringMvc后台接收json数据中文乱码问题详解

原因分析 使用ajax从前台页面传输数据到后台controller控制器的时候,出现中文乱码 其实乱码问题出现的原因,就是由于默认的tomcat配置,接收请求是以ISO-8859-1来转码,导致中文出现了乱码问题,只要能正确的以utf-8来转码,则可以解决乱码问题. 普通数据传输,从jsp页面传到后台controller,中文乱码问题解决方案 首先检查jsp页面编码格式是否是utf-8 设置中文过滤 <filter> <filter-name>characterEncodingFi

解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法

把PHP的版本从5.2.14升到了5.4.15,升级完后dedecms后台却打开空白,检查了各种权限和文件,都没有问题,找来找去,原来是PHP版本函数的问题,它是用session_register来注册一个session变量,但是在php5.4以上中已经移除了这个功能 解决办法: 找到include/userlogin.class.php,里面有一个keepuser()函数,它是用session_register来注册一个session变量,但是在php5.4中已经移除了这个功能,见官网介绍:

利用SpringMVC过滤器解决vue跨域请求的问题

之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

解决Vue axios post请求,后台获取不到数据的问题方法

最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

angular使用post、get向后台传参的问题实例

一.问题的来源 我们都知道向后台传参可以使用get.put,其形式就类似于name=jyy&id=001.但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的.其实这个问题是因为请求头的缘故.在ng中默认的请求头是:"Content-Type":"application/json",也就是说传递参数是使用的就是json格式.但是后台默认的却是Content-Type': 'application/x-www-form-urle

Angular.js如何从PHP读取后台数据

之前已经有很多方法可以通过angular进行本地数据的读取.以前的例子中,大多数情况都是将数据存放到模块的$scope变量中,或者直接利用ng-init定义初始化的数据.但是这些方法都只为了演示其他功能的效果.这次来学习一下如何将Angular和PHP相结合,从后台读取数据. 首先,利用PHP,我们定义了一组后台数据,代码如下(test.php): <?php header("Access-Control-Allow-Origin: *"); header("Conte