解决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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 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+MySQL的聊天室设计
2006/10/09 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python中图像通道分离与合并实例
2020/01/17 Python
为什么说python更适合树莓派编程
2020/07/20 Python
python 检测图片是否有马赛克
2020/12/01 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
省文明单位申报材料
2014/05/08 职场文书
大学生见习报告总结
2014/11/04 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
总结Python变量的相关知识
2021/06/28 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
python分分钟绘制精美地图海报
2022/02/15 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python