后端接收不到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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 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 INI配置文件的解析实现分析
2011/01/04 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js tab效果的实现代码
2009/12/26 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
浅析Python 多行匹配模式
2020/07/24 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
企业后勤岗位职责
2014/02/28 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
公司开会通知
2015/04/20 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
银行资信证明
2015/06/17 职场文书
小学生读书笔记范文
2015/06/30 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
Python装饰器详细介绍
2022/03/25 Python
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
python实现学员管理系统(面向对象版)
2022/06/05 Python