解决angular的$http.post()提交数据时后台接收不到参数值问题的方法  更新时间:2015年12月10日 09:09:43   作者:jinhuazhe2013   这篇文章为大家分享了解决angular的$http.post()提交数据时后台接收不到参数值问题的方法,感兴趣的小伙伴们可以参考一下 写此文的背景:在学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法。 写此文的目的:通过上面提到的文章中的解决之道,结合自己的经验,总结了如下发现。 前端:html,jquery,angular 后端:java,springmvc 一、平常使用的post提交和接收方式 前端使用jquery提交数据。 $.ajax({ url:’/carlt/loginForm’, method: ‘POST’, data:{“name”:”jquery”,”password”:”pwd”}, dataType:’json’, success:function(data){ //… } }); 后端java接收: @Controller public class UserController { @ResponseBody @RequestMapping(value=”/loginForm”,method=RequestMethod.POST) public User loginPost(User user){ System.out.println(“username:”+user.getName()); System.out.println(“password:”+user.getPassword()); return user; } } model(不要忘记get、set方法): public class User { private String name; private String password; private int age; //setter getter method } 后台打印: username:jquery password:pwd 调用接口查看到的前端返回结果: 二、使用angularJs的post方法提交 UserName: PassWord: 登录 js代码: var app = angular.module(‘myApp’, []); app.controller(‘formCtrl’, function($scope,$http) { $scope.login = function() { $http({ url:’/carlt/loginForm’, method: ‘POST’, data: {name:’angular’,password:’333′,age:1} }).success(function(){ console.log(“success!”); }).error(function(){ console.log(“error”); }) }; }); 后台打印结果: username:null password:null: 查看前端: 三、解决angular提交post问题。 相信看过上面提到的哪怕文章的人已经知道怎么解决问题了吧。文中是更改了angular的提交方式,使得angular的提交数据方式更像jquery的。 我试过,也是行得通的。然后我又试了另外一种方式。如下: 前端不变,依然是: var app = angular.module(‘myApp’, []); app.controller(‘formCtrl’, function($scope,$http) { $scope.login = function() { $http({ url:’/carlt/loginForm’, method: ‘POST’, data: {name:’angular’,password:’333′,age:1} }).success(function(){ console.log(“success!”); }).error(function(){ console.log(“error”); }) }; }); 后台变了,只是在User前加上@RequstBody,因为angular提交的是json对象: @Controller public class UserController { @ResponseBody @RequestMapping(value=”/loginForm”,method=RequestMethod.POST) public User loginPost(@RequestBody User user){ System.out.println(“username:”+user.getName()); System.out.println(“password:”+user.getPassword()); return user; } } @RequestBody 作用:       i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上;       ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。 使用时机: A) GET、POST方式提时, 根据request header Content-Type的值来判断:     application/x-www-form-urlencoded, 可选(即非必须,因为这种情况的数据@RequestParam, @ModelAttribute也可以处理,当然@RequestBody也能处理);     multipart/form-data, 不能处理(即使用@RequestBody不能处理这种格式的数据);     其他格式, 必须(其他格式包括application/json, application/xml等。这些格式的数据,必须使用@RequestBody来处理); B) PUT方式提交时,根据request header Content-Type的值来判断:     application/x-www-form-urlencoded, 必须;     multipart/form-data, 不能处理;     其他格式,必须; 说明:request的body部分的数据编码格式由header部分的Content-Type指定; 四、解决了angular问题之后,发现jquery按照原来的方式提交post请求会报错(错误码415)。 如下方式可以解决jquery提交问题: $.ajax({ url:’/carlt/loginForm’, method: ‘POST’, contentType:’application/json;charset=UTF-8′, data:JSON.stringify({“name”:”jquery”,”password”:”pwd”}), dataType:’json’, success:function(data){ //… } }); json对象转json字符串:JSON.stringify(jsonObj); 以上就是本文的全部内容,有兴趣的同学可以试试其它方法,希望本文可以解决大家遇到的angular的post提交问题。 您可能感兴趣的文章: 对比分析AngularJS中的$http.post与jQuery.post的区别 Angularjs中$http以post请求通过消息体传递参数的实现方法 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法 AngularJS下$http服务Post方法传递json参数的实例 AngularJS $http模块POST请求实现 AngularJS $http post 传递参数数据的方法 angularJS 发起$http.post和$http.get请求的实现方法 AngularJS封装$http.post()实例详解 深入理解Angularjs中$http.post与$.post Angular利用HTTP POST下载流文件的步骤记录 angular post 提交问题 相关文章 AngularJS中使用HTML5手机摄像头拍照 这篇文章主要介绍了AngularJS中使用HTML5手机摄像头拍照的相关资料,需要的朋友可以参考下 2016-02-02 AngularJS操作键值对象类似java的hashmap(填坑小结) 我们知道java的hashmap中使用最多的是put(…),get(…)以及remove()方法,那么在angularJS中如何创造(使用)这样一个对象呢?今天小编通过本文给大家分享下,感兴趣的朋友一起学习吧 2016-11-11 Angularjs实现mvvm式的选项卡示例代码 每位Web开发者应该都知道,选项卡是现代web网页中最常用的效果之一,所以本文重点是用angularjs这个非常火mvvm框架,实现选项卡效果。有需要的朋友们可以参考借鉴,下面来一起看看吧。 2016-09-09 angular4自定义组件非input元素实现ngModel双向数据绑定的方法 这篇文章主要介绍了angular4自定义组件非input元素实现ngModel双向数据绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 对angularJs中自定义指令replace的属性详解 今天小编就为大家分享一篇对angularJs中自定义指令replace的属性详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 如何在Angular2中使用jQuery及其插件的方法 本篇文章主要介绍了如何在Angular2中使用jQuery及其插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-02-02 AngularJS中的表单简单入门 本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴 2016-07-07 AngularJS中的Directive实现延迟加载 延迟加载通常是直到用户交互时才加载,那么如何实现延时加载的呢?下面通过本文一起学习AngularJS中的Directive实现延迟加载,对angularjs延时加载相关知识感兴趣的朋友一起学习吧 2016-01-01 Angular2 之 路由与导航详细介绍 本篇文章主要介绍了Angular2 之 路由与导航详细介绍,详细的介绍了路由的用法,具有一定的参考价值,有兴趣的可以了解一下 2017-05-05 Angular项目如何升级至Angular6步骤全纪录 这篇文章主要给大家介绍了关于Angular项目如何升级至Angular6的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2018-09-09 最新评论

写此文的背景:在学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法。

写此文的目的:通过上面提到的文章中的解决之道,结合自己的经验,总结了如下发现。
前端:html,jquery,angular
后端:java,springmvc
一、平常使用的post提交和接收方式
前端使用jquery提交数据。

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',  
  data:{"name":"jquery","password":"pwd"},
  dataType:'json',
  success:function(data){
    //...
  }
});

后端java接收:

@Controller
public class UserController {
  @ResponseBody
  @RequestMapping(value="/loginForm",method=RequestMethod.POST)
  public User loginPost(User user){
    System.out.println("username:"+user.getName());
    System.out.println("password:"+user.getPassword());
    return user;
  }
}
model(不要忘记get、set方法):
public class User {
  private String name;
  private String password;
  private int age;
  
  //setter getter method

}

后台打印:

username:jquery
password:pwd

调用接口查看到的前端返回结果:

二、使用angularJs的post方法提交

<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
 UserName:<br>
 <input type="text" ng-model="user.username"><br>
 PassWord:<br>
 <input type="text" ng-model="user.pwd">
 <br><br>
 <button ng-click="login()">登录</button>
 </form>
</div>

js代码:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
 $scope.login = function() {
  $http({
   url:'/carlt/loginForm',
   method: 'POST',   
   data: {name:'angular',password:'333',age:1}  
  }).success(function(){
   console.log("success!");
  }).error(function(){
   console.log("error");
  })
 };
});

后台打印结果:

username:null
password:null:

查看前端:

三、解决angular提交post问题。
相信看过上面提到的哪怕文章的人已经知道怎么解决问题了吧。文中是更改了angular的提交方式,使得angular的提交数据方式更像jquery的。

我试过,也是行得通的。然后我又试了另外一种方式。如下:

前端不变,依然是:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
  $scope.login = function() {
    $http({
      url:'/carlt/loginForm',
      method: 'POST',      
      data: {name:'angular',password:'333',age:1}   
    }).success(function(){
      console.log("success!");
    }).error(function(){
      console.log("error");
    })
  };
});

后台变了,只是在User前加上@RequstBody,因为angular提交的是json对象:

@Controller
public class UserController {
  @ResponseBody
  @RequestMapping(value="/loginForm",method=RequestMethod.POST)
  public User loginPost(@RequestBody User user){
    System.out.println("username:"+user.getName());
    System.out.println("password:"+user.getPassword());
    return user;
  }
}
@RequestBody

作用:

      i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上;

      ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

使用时机:

A) GET、POST方式提时, 根据request header Content-Type的值来判断:

    application/x-www-form-urlencoded, 可选(即非必须,因为这种情况的数据@RequestParam, @ModelAttribute也可以处理,当然@RequestBody也能处理);
    multipart/form-data, 不能处理(即使用@RequestBody不能处理这种格式的数据);
    其他格式, 必须(其他格式包括application/json, application/xml等。这些格式的数据,必须使用@RequestBody来处理);
B) PUT方式提交时,根据request header Content-Type的值来判断:

    application/x-www-form-urlencoded, 必须;
    multipart/form-data, 不能处理;
    其他格式,必须;
说明:request的body部分的数据编码格式由header部分的Content-Type指定;

四、解决了angular问题之后,发现jquery按照原来的方式提交post请求会报错(错误码415)。

如下方式可以解决jquery提交问题:

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',
  contentType:'application/json;charset=UTF-8',
  data:JSON.stringify({"name":"jquery","password":"pwd"}),
  dataType:'json',
  success:function(data){
    //...
  }
});

json对象转json字符串:JSON.stringify(jsonObj);

以上就是本文的全部内容,有兴趣的同学可以试试其它方法,希望本文可以解决大家遇到的angular的post提交问题。

您可能感兴趣的文章:

  • 对比分析AngularJS中的$http.post与jQuery.post的区别
  • Angularjs中$http以post请求通过消息体传递参数的实现方法
  • 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
  • AngularJS下$http服务Post方法传递json参数的实例
  • AngularJS $http模块POST请求实现
  • AngularJS $http post 传递参数数据的方法
  • angularJS 发起$http.post和$http.get请求的实现方法
  • AngularJS封装$http.post()实例详解
  • 深入理解Angularjs中$http.post与$.post
  • Angular利用HTTP POST下载流文件的步骤记录
张贴在3