Method _ AngularJS

This article mainly introduces how to solve the problem that SpringMVC does not receive parameter values in the background after angular post requests. If you are interested, refer to this method for SpringMVC controller in my background to receive isform parameters, it simply outputs its value:

@RequestMapping(method = RequestMethod.POST)  @ResponseBody  public Map
 
   save(      @RequestParam(value = "isform", required = false) String isform) {    System.out.println("isform value: " + isform);    return null;   }
 

Send a post form submission request on the front-end page

No value found in the background

The first solution I came up with is to add requestbody to the Controller method parameters to receive json parameters, and change it to the following:

@RequestMapping(method = RequestMethod.POST)  @ResponseBody  public Map
 
   save(      @RequestParam(value = "isform", required = false) @RequestBody String isform) {    System.out.println("isform value: " + isform);    return null;   }
 

However, the result of the isform value is null,
Then I compared the parameters in the previous project that received the post request and found an interesting phenomenon,

The following is the default request header of Angular:

$ HttpProvider. defaults. headers. post: (header defaults for POST requests)

Content-Type: application/json

$ HttpProvider. defaults. headers. put (header defaults for PUT requests)

Content-Type: application/json

Both Angular post and put are application/json,

In the post request of jquery, the default "Content-Type" is "application/x-www-form-urlencoded", so I changed the default Content-Type of angular,

app.config(function($httpProvider) {  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; });

The following Request body is changed to this type, but the isform value is not obtained,

I checked for another half a day,I found the cause on a foreigner's blog:
By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo = bar & baz = moe serialization. angularJS, however, transmits data using Content-Type: application/json and {"foo": "bar", "baz": "moe"} JSON serialization
Translated by yourself:

By default, jQuery uses Content-Type: x-www-form-urlencodedand and a sequence similar to "foo = bar & baz = moe" for data transmission. However, AngularJS, transmit data using json sequences such as Content-Type: application/json and {"foo": "bar", "baz": "moe.

Therefore, after you set Content-Type to x-www-form-urlencodedand, you also need to convert the sequence format,

Below are the final solutions I have tested with foreigners:

app.config(function($httpProvider) {  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';   // Override $http service's default transformRequest  $httpProvider.defaults.transformRequest = [function(data) {    /**     * The workhorse; converts an object to x-www-form-urlencoded serialization.     * @param {Object} obj     * @return {String}     */    var param = function(obj) {      var query = '';      var name, value, fullSubName, subName, subValue, innerObj, i;       for (name in obj) {        value = obj[name];         if (value instanceof Array) {          for (i = 0; i < value.length; ++i) {            subValue = value[i];            fullSubName = name + '[' + i + ']';            innerObj = {};            innerObj[fullSubName] = subValue;            query += param(innerObj) + '&';          }        } else if (value instanceof Object) {          for (subName in value) {            subValue = value[subName];            fullSubName = name + '[' + subName + ']';            innerObj = {};            innerObj[fullSubName] = subValue;            query += param(innerObj) + '&';          }        } else if (value !== undefined && value !== null) {          query += encodeURIComponent(name) + '='              + encodeURIComponent(value) + '&';        }      }       return query.length ? query.substr(0, query.length - 1) : query;    };     return angular.isObject(data) && String(data) !== '[object File]'        ? param(data)        : data;  }];});

Add the above Code to the angular module. Let's take a look at the effect:

It is found that the post request style is consistent with that of jquery !!!

Check the parameter reception in the background,

The isform can receive parameters normally!

The above is the solution for angular's post request to receive null parameters in the background. I hope it will be helpful for your learning.