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 multiSelect 多选下拉框
Jul 09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
九种原生js动画效果
Nov 11 Javascript
Javascript动画效果(2)
Oct 11 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
js 数组 fill() 填充方法
Nov 02 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
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python 伯努利分布详解
2020/02/25 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
python自动生成证件号的方法示例
2021/01/14 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
干部鉴定材料
2014/05/18 职场文书
人事任命书范文
2014/06/04 职场文书
员工离职通知函
2015/04/25 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
调解协议书范本
2016/03/21 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
七个非常实用的Python工具包总结
2021/06/15 Python
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis