后端接收不到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 相关文章推荐
JS trim去空格的最佳实践
Oct 30 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php引用传值实例详解学习
2013/11/06 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
如何编写jquery插件
2017/03/29 jQuery
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python实现的RSS阅读器实例
2015/07/25 Python
python2.7安装图文教程
2018/03/13 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
运动会方阵解说词
2014/02/12 职场文书
采购助理岗位职责
2014/02/16 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery