后端接收不到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 相关文章推荐
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
js中!和!!的区别与用法
May 09 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
微信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
javascript 必知必会之closure
2009/09/21 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JS hashMap实例详解
2016/05/26 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python socket编程实例详解
2015/05/27 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python实现自主查询实时天气
2018/06/22 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
厨师长岗位职责
2014/03/02 职场文书
竞争上岗实施方案
2014/03/21 职场文书
运动会开幕式主持词
2014/03/28 职场文书
党员剖析材料范文
2014/09/30 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js