Method to solve the problem that the background cannot receive parameter values ​​when submitting data in angular's $http.post()_AngularJS

Background for writing this article: When I was learning to use angular’s ​​$http.post() to submit data, the background could not receive parameter values, so I consulted relevant information to find a solution.

The purpose of writing this article: through the solutions in the above-mentioned articles and combined with my own experience, I summarized the following findings.
Front-end: html, jquery, angular
Back-end: java, springmvc
1. Commonly used post submission and receiving methods
The front-end uses jquery to submit data.

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

Backend java reception:

@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

}

Background printing:

username:jquery
password:pwd

The front-end return result viewed by calling the interface:

2. Use the post method of angularJs to submit

<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 code:

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

Background printing result:

username:null
password:null：

View the front end:

3. Solve angular Submit a post question.
I believe that people who have read the articles mentioned above already know how to solve the problem. The article changes the way angular submits data, making it more like jquery.

I tried it and it works. Then I tried another way. As follows:

The front end remains unchanged, still:

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

The backend has changed, but Add @RequstBody in front of User, because angular submits a json object:

@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

Function:

i) This annotation is used to read the body part of the Request request, use the system's default configured HttpMessageConverter to parse, and then bind the corresponding data to the object to be returned on the object;

ii) Then bind the object data returned by HttpMessageConverter to the parameters of the method in the controller.

Usage timing:

A) GET and POST method timings are judged according to the value of request header Content-Type:

application/x-www-form-urlencoded, optional (that is, not necessary, because the data in this case @RequestParam, @ModelAttribute can also be processed, and of course @RequestBody can also be processed);
multipart/form- data, cannot be processed (that is, data in this format cannot be processed using @RequestBody);
Other formats are required (other formats include application/json, application/xml, etc. Data in these formats must be processed using @RequestBody) ;
B) When submitting in PUT mode, judge based on the value of request header Content-Type:

application/x-www-form-urlencoded, required;
multipart /form-data, cannot be processed;
Other formats are required;
Note: The data encoding format of the body part of the request is specified by the Content-Type of the header part;

4. Solution After solving the angular problem, I found that jquery would report an error (error code 415) when submitting a post request in the original way.

The following method can solve the jquery submission problem:

$.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 object conversion json string: JSON.stringify(jsonObj);

The above is the method to solve the problem that the background cannot receive parameter values ​​​​when angular's $http.post() submits data_AngularJS content, please visit for more related content Follow the PHP Chinese website (www.php.cn)!