解决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控制frame,iframe的src属性代码
Dec 31 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Javascript创建类和对象详解
May 31 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
express启用https使用小记
May 21 Javascript
一些可能会用到的Node.js面试题
Jun 15 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可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python paramiko模块学习分享
2017/08/23 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python画微信表情符的实例代码
2019/10/09 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
医院实习介绍信
2014/01/12 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
医学求职信
2014/05/28 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
群众路线对照检查材料
2014/09/22 职场文书
基层党组织整改方案
2014/10/25 职场文书