Solve the angular $http.post () the background received no parameter value problems when submitting data _angularjs

Write this article background: in learning to use angular $http.post () to submit data, the background can not receive parameter values, and then consulted the relevant data to find solutions.

The purpose of this article: through the above mentioned article in the solution, combined with their own experience, summed up the following findings.
Front End: Html,jquery,angular
Back end: Java,springmvc
first, the usual use of post submission and reception 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) {
    //...
  }
});

Back-end Java receive:

@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 (Don't forget get, set method): Public
class User {
  private String name;
  private String password;
  private int age;
  
  Setter Getter Method

}

Print Spooler:

Username:jquery
Password:pwd

Call interface to see the front end return results:

Second, the use of Angularjs Post method submission

<div ng-app= "myApp" ng-controller= "Formctrl" >
 <form novalidate>
 username:<br>
 < Input type= "text" ng-model= "User.username" ><br>
 password:<br>
 <input "text" Ng-model= "User.pwd" >
 <br><br>
 <button ng-click= "login ()" > 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");
  })
 };

Print spool results:

Username:null
Password:null:

View Front End:

Third, solve angular submit post problem.
It is believed that those who read the articles mentioned above already know how to solve the problem. The paper changes the way the angular is submitted, making it more like jquery to submit the angular data.

I tried, and it worked. Then I tried another way. As follows:

The front end remains the same:

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 background has changed, just adding @requstbody to the user, because angular is submitting 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

Role:

(i) The annotation is used to read the body part of the request requests, parse using the httpmessageconverter of the system default configuration, and then bind the corresponding data to the object to be returned;

II) Bind the object data returned by Httpmessageconverter to the parameters of the method in controller.

Time to use:

A) Get, post method, according to the request header Content-type value to judge:

application/x-www-form-urlencoded, Optional (that is, not necessary, because the data of this situation @requestparam, @ModelAttribute can also be processed, of course, @requestbody can also handle);
Multipart/form-data, cannot be processed (that is, using @requestbody cannot handle data of this format);
Other formats must be (other formats include Application/json, Application/xml, etc.). The data in these formats must be processed using @requestbody;
B when the Put method is submitted, it is judged according to the value of the request header Content-type :

Application/x-www-form-urlencoded, must;
Multipart/form-data, unable to handle;
Other formats that must be;
Description: The data encoding format of the body part of request is specified by the Content-type of the header part;

Iv. after solving the angular problem, it is found that jquery submits the post request in the original way (error code 415).

You can resolve the jquery submission issue in the following ways:

$.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 goto JSON string: json.stringify (jsonobj);

The above is the entire content of this article, interested students can try other methods, I hope this article can solve the angular you encounter the post submission problem.