后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法


Posted in Javascript onJuly 05, 2016

1.问题:

后端接收不到AngularJs中$http.post发送的数据,总是显示为null

示例代码:

$http.post(/admin/KeyValue/GetListByPage,
{ 
pageindex: 1,
pagesize: 8
})
.success(function(){ 

alert("Mr靖");

});

代码没有错,但是在后台却接收不到数据,这是为什么呢?

用火狐监控:参数是JSON格式

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

用谷歌监控:传参方式是request payload

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

可以发现传参方式是request payload,参数格式是json,而并非用的是form传参,所以在后台用接收form数据的方式接收参数就接收不到了

POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指
定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8,而此处的Content-Type是:

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

--------------------------------------------------------------------------------

2.解决方法:

直接上代码:

//要通过post传递的参数
var data = {
pageindex: 1,
pagesize: 8,
},
//post请求的地址
url = "/admin/KeyValue/GetListByPage",
//将参数传递的方式改成form
postCfg = {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (data) {
return $.param(data);
}
};
//发送post请求,获取数据
$http.post(url, data, postCfg)
.success(function (response) {
alert("Mr靖");
});

接下来再看监视工具:

火狐监视:参数类型已经变成表单数据

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

谷歌监视:

后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

现在传参方式就变成form方式了,然后后端就可以正常接收参数了!

以上所述是小编给大家介绍的后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
webpack之devtool详解
Feb 10 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 #Javascript
Bootstrap实现水平排列的表单
Jul 04 #Javascript
JSONP跨域请求实例详解
Jul 04 #Javascript
Bootstrap表单布局样式源代码
Jul 04 #Javascript
JS JSOP跨域请求实例详解
Jul 04 #Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
jQuery简单动画变换效果实例分析
Jul 04 #Javascript
You might like
输出控制类
2006/10/09 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
用python写测试数据文件过程解析
2019/09/25 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python request 模块详细介绍
2020/11/10 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
环境保护建议书
2014/08/26 职场文书
婚礼父母致辞
2015/07/28 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书