解决angular的post请求后SpringMVC后台接收不到参数值问题的方法  更新时间:2015年12月10日 09:22:40   作者:boyce小布   这篇文章主要介绍了解决angular的post请求后SpringMVC后台接收不到参数值问题的方法,感兴趣的小伙伴们可以参考一下 这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map save( @RequestParam(value = “isform”, required = false) String isform) { System.out.println(“isform value: ” + isform); return null; } 前台页面发送一个post提交表单的请求 发现后台没有取到值 后边我想到的第一种方案是在控制器方法参数里加requestbody来接收json参数,改成如下: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map save( @RequestParam(value = “isform”, required = false) @RequestBody String isform) { System.out.println(“isform value: ” + isform); return null; } 但是isform的值结果还是为null, 接着我又对比了下以前的项目中,接收post请求的参数,发现一个有趣的现象, 下边是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 其中Angular的post和put都是application/json, 而jquery的post请求的”Content-Type”默认为” application/x-www-form-urlencoded”,于是我更改了angular的默认Content-Type, 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’; }); 接下来的请求body变成了这样,但是后边还是没有取到isform的值, 又查了半天,在一个老外的博客上发现了原因: 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 自己翻译了: 默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencodedand和类似于”foo=bar&baz=moe”的序列,然而AngularJS,传输数据使用Content-Type: application/json和{ “foo”: “bar”, “baz”: “moe” }这样的json序列。 所以下把Content-Type设置成x-www-form-urlencodedand之后,还需要转换序列的格式, 下边是我经过老外实践而自己测试过的最终方案: 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; }]; }); 在angular模块中添加以上代码,我们来看下效果: 发现与jquery的post请求风格一致了,有木有!!! 看下后台的参数接收情况,   isform已经可以正常接收到参数了,大功告成! 以上就是angular的post请求后台接收参数为null的解决方案,希望对大家的学习有所帮助。 您可能感兴趣的文章: 详解SpringMVC——接收请求参数和页面传参 快速解决SpringMVC @RequestBody 用map接收请求参数的问题 axios发送post请求springMVC接收不到参数的解决方法 学习SpringMVC——如何获取请求参数详解 SpringMvc自动装箱及GET请求参数原理解析 Spring MVC请求参数的深入解析 angular post null 相关文章 angular中的http拦截器Interceptors的实现 本篇文章主要介绍了angular中的http拦截器Interceptors的实现的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-02-02 Angular ng-repeat指令实例以及扩展部分 这篇文章主要为大家详细介绍了Angular ng-repeat指令实例以及扩展部分,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 Angular8基础应用之表单及其验证 这篇文章主要给大家介绍了关于Angular8基础应用之表单及其验证的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular8具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-08-08 AngularJS实现页面定时刷新 本篇文章主要介绍了AngularJS实现页面定时刷新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 Angularjs 动态改变title标题(兼容ios) 这篇文章主要介绍了 Angularjs 动态改变title标题(兼容ios)的相关资料,需要的朋友可以参考下 2016-12-12 AngularJS中transclude用法详解 这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能、使用技巧与相关注意事项,需要的朋友可以参考下 2016-11-11 AngularJS基础 ng-if 指令用法 本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下 2016-08-08 angularJS1 url中携带参数的获取方法 今天小编就为大家分享一篇angularJS1 url中携带参数的获取方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 使用Angular.js实现简单的购物车功能 在各大购物网站大家都可以简单购物车效果演示,下面通过本文给大家分享一段代码关于使用Angular.js实现简单的购物车功能,需要的朋友可以参考下 2016-11-11 Angular 2父子组件数据传递之局部变量获取子组件其他成员 这篇文章主要给大家介绍了关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-07-07 最新评论

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值:

@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;
 
  }

前台页面发送一个post提交表单的请求

发现后台没有取到值

后边我想到的第一种方案是在控制器方法参数里加requestbody来接收json参数,改成如下:

@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;
 
  }

但是isform的值结果还是为null,
接着我又对比了下以前的项目中,接收post请求的参数,发现一个有趣的现象,

下边是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

其中Angular的post和put都是application/json,

而jquery的post请求的”Content-Type”默认为” application/x-www-form-urlencoded”,于是我更改了angular的默认Content-Type,

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

接下来的请求body变成了这样,但是后边还是没有取到isform的值,

又查了半天,在一个老外的博客上发现了原因:
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
自己翻译了:

默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencodedand和类似于”foo=bar&baz=moe”的序列,然而AngularJS,传输数据使用Content-Type: application/json和{ “foo”: “bar”, “baz”: “moe” }这样的json序列。

所以下把Content-Type设置成x-www-form-urlencodedand之后,还需要转换序列的格式,

下边是我经过老外实践而自己测试过的最终方案:

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

在angular模块中添加以上代码,我们来看下效果:

发现与jquery的post请求风格一致了,有木有!!!

看下后台的参数接收情况,

 

isform已经可以正常接收到参数了,大功告成!

以上就是angular的post请求后台接收参数为null的解决方案,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • 详解SpringMVC——接收请求参数和页面传参
  • 快速解决SpringMVC @RequestBody 用map接收请求参数的问题
  • axios发送post请求springMVC接收不到参数的解决方法
  • 学习SpringMVC——如何获取请求参数详解
  • SpringMvc自动装箱及GET请求参数原理解析
  • Spring MVC请求参数的深入解析
张贴在3