解决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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
php实例化一个类的具体方法
2019/09/19 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python实现邮件的批量发送的示例代码
2018/01/23 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
python 6种方法实现单例模式
2020/12/15 Python
创立科技Java面试题
2015/11/29 面试题
写求职信有什么意义
2014/02/17 职场文书
我爱我家教学反思
2014/05/01 职场文书
行政监察建议书
2014/05/19 职场文书
法人授权委托书样本
2014/09/19 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
电信营业员岗位职责
2015/04/14 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers