AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案


Posted in Javascript onAugust 13, 2020

最近在使用AngularJs+Php开发中遇到php后台无法接收到来自AngularJs的数据,在网上也有许多解决方法,却都点到即止.多番摸索后记录下解决方法:

tips:当前使用的AngularJs版本为v1.5.0-rc.0

原因分析:

在使用jquery的时候进行post请求的时候很简单.

$.ajax({
 type: 'POST',
 url:'process.php',
 data: formData,
 dataType: 'json',
 success: function(result){
 //do something
 }
 });

对这个传输的数据我们一般会直接使用serialize()或使用serializeArray()处理后再传输,但在发送post请求时jquery会把这个对象转换为字符串后再发送,类似"a=123&b=456".
而AngularJs传输的是一个Json数据而不是一个转换后的字符串,在php端接收的时候不能直接使用$_POST方式接收.这样是获取不到数据的.
$POST方式只能接收Content-Type: application/x-www-form-urlencoded提交的数据,也就是表单提交的数据.
但可以使用file_get_contents("php://input")接收,对于没有没有指定Content-Type的Post数据也是可以接收到的,此时获取到的是个字符串还需要再转换才能变成我们想要的数据格式.这样无疑增加了工作量.

解决方案:

1.引用JQuery,使用JQuery的$.param()方法序列化参数后传递

$http({
 method : 'POST',
 url: 'process.php',
 data: $.param($scope.formData), //序列化参数
 headers: { 'Content-Type': 'application/x-www-form-urlencoded' } )
}) 

2.使用file_get_contents("php://input")获取再处理

$input = file_get_contents("php://input",true);
echo $input; 

3.修改Angular的$httpProvider的默认处理(参考:http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/)

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
 // Use x-www-form-urlencoded Content-Type
 $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
 
 /**
 * The workhorse; converts an object to x-www-form-urlencoded serialization.
 * @param {Object} obj
 * @return {String}
 */
 var param = function(obj) {
 var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
 
 for(name in obj) {
 value = obj[name];
 
 if(value instanceof Array) {
 for(i=0; i<value.length; ++i) {
 subValue = value[i];
 fullSubName = name + '[' + i + ']';
 innerObj = {};
 innerObj[fullSubName] = subValue;
 query += param(innerObj) + '&';
 }
 }
 else if(value instanceof Object) {
 for(subName in value) {
 subValue = value[subName];
 fullSubName = name + '[' + subName + ']';
 innerObj = {};
 innerObj[fullSubName] = subValue;
 query += param(innerObj) + '&';
 }
 }
 else if(value !== undefined && value !== null)
 query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
 }
 
 return query.length ? query.substr(0, query.length - 1) : query;
 };
 
 // Override $http service's default transformRequest
 $httpProvider.defaults.transformRequest = [function(data) {
 return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
 }];
});
$http({
 method:"POST",
 url:"/api/login.php",
 data:$scope.Account
});

补:

php获取时也可通过$GLOBALS['HTTP_RAW_POST_DATA']获取POST提交的原始数据.

$GLOBALS['HTTP_RAW_POST_DATA']中是否保存POST过来的数据取决于centent-Type的设置,即POST数据时 必须显式示指明Content-Type: application/x-www-form-urlencoded,POST的数据才会存放到 $GLOBALS['HTTP_RAW_POST_DATA']中.

总结

到此这篇关于AngularJs的$http发送POST请求,php无法接收Post的数据解决方案的文章就介绍到这了,更多相关AngularJs的$http发送POST请求内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
JSON格式化输出
Nov 10 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
VsCode里的Vue模板的实现
Aug 12 #Javascript
typescript配置alias的详细步骤
Aug 12 #Javascript
js实现表格单列按字母排序
Aug 12 #Javascript
javascript的hashCode函数实现代码小结
Aug 11 #Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 #Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 #Javascript
封装 axios+promise通用请求函数操作
Aug 11 #Javascript
You might like
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python pandas如何向excel添加数据
2020/05/22 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
美国羊皮公司:Overland
2018/01/15 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
体育教育毕业生自荐信
2014/06/29 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
销售会议开幕词
2015/01/28 职场文书
大学毕业生自我评价
2015/03/02 职场文书
疾病证明书
2015/06/19 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB