解决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 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php数组去除空值函数分享
2015/02/02 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP中list方法用法示例
2016/12/01 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
php 猴子摘桃的算法
2017/06/20 PHP
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
js使用递归解析xml
2014/12/12 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
python实现实时监控文件的方法
2016/08/26 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python列表切片常用操作实例解析
2020/03/10 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
C语言面试题
2013/05/19 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
工作试用期自我评价
2015/03/10 职场文书
商场收银员岗位职责
2015/04/07 职场文书
党员证明信
2015/06/19 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android