Method to solve the problem that SpringMVC background cannot receive parameter values ​​after angular post request_AngularJS

This is the method for my background SpringMVC controller to receive the isform parameter and simply type its value:

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

The front page sends a post request to submit the form

It was found that the value was not obtained in the background

The first solution I thought of later was to add requestbody to the controller method parameters to receive the json parameters. Change it to the following:

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

But the value result of isform is still null,
Then I compared the parameters for receiving post requests in previous projects, and found an interesting phenomenon,

The following are Angular’s ​​default request headers:

$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

Angular’s ​​post and put are both application/json,

The "Content-Type" of jquery's post request defaults to "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 next request body becomes like this, but the value of isform is still not obtained later,

After checking for a long time, found the reason 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 myself:

By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and a sequence similar to "foo=bar&baz=moe", however AngularJS, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } such a json sequence.

So after setting Content-Type to x-www-form-urlencodedand, you still need to convert the format of the sequence,

The following is the final solution that I have tested myself after practicing 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 &#63; query.substr(0, query.length - 1) : query;
    };
 
    return angular.isObject(data) && String(data) !== '[object File]'
        &#63; param(data)
        : data;
  }];
});

Add the above code in the angular module and let’s see the effect:

I found that the post request style is consistent with jquery’s post request style. Is this true? ! !

Look at the parameter reception status in the background,

isform can now receive parameters normally, and you’re done!

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