您的位置:首页 > 理论基础 > 计算机网络

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

2017-04-19 14:43 971 查看
本文地址:http://www.cnblogs.com/jying/p/6733408.html 转载请注明出处;

写此文的背景:在工作学习使用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;
}


后台输出结果正确。

二、使用angularJs的post方法提交

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问题

  A、改前端

  参考地址:http://www.cnblogs.com/humaotegong/articles/5641943.html

  B、改后台Java(在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) @RequestBody用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上;

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

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

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

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


还需特别注意:Java接收参数最好为类对象(如本文中的User对象),如果用分参数格式,会获取到一个json字符串,还需额外的解析处理,使用不方便。

本文参考地址:http://www.cfei.net/archives/24102
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐