解决angular的post请求后SpringMVC后台接收不到参数值问题的方法


Posted in Javascript onDecember 10, 2015

这是我后台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提交表单的请求

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

发现后台没有取到值

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

后边我想到的第一种方案是在控制器方法参数里加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的值,

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

又查了半天,在一个老外的博客上发现了原因:
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模块中添加以上代码,我们来看下效果:

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

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

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

 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

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

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

Javascript 相关文章推荐
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js时间控件只显示年月
Jan 08 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 #Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 #Javascript
js实现新年倒计时效果
Dec 10 #Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
You might like
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
javascript 写类方式之十
2009/07/05 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Python 高级专用类方法的实例详解
2017/09/11 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Django的models中on_delete参数详解
2019/07/16 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
IBatis持久层技术
2016/07/18 面试题
小学毕业感言500字
2014/02/28 职场文书
活动倡议书范文
2014/05/13 职场文书
社区党员公开承诺书
2014/08/30 职场文书
幼儿园见习报告
2014/10/30 职场文书
怎样写好工作计划
2019/04/10 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang