后端接收不到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 相关文章推荐
理解Javascript_09_Function与Object
Oct 16 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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/12/06 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python删除某个字符
2018/03/19 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python基于递归解决背包问题详解
2019/07/03 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
开业庆典策划方案
2014/02/18 职场文书
《悯农》教学反思
2014/04/28 职场文书
促销活动总结模板
2014/07/01 职场文书
资料员岗位职责
2015/02/10 职场文书