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 相关文章推荐
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue-cli3 配置开发与测试环境详解
May 17 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php多任务程序实例解析
2014/07/19 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
详解Python中for循环的使用
2015/04/14 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
Python 在局部变量域中执行代码
2020/08/07 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
学生宿舍管理制度
2014/01/30 职场文书
《满井游记》教学反思
2014/02/26 职场文书
本科生自荐信
2014/06/18 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2015年库房工作总结
2015/04/30 职场文书
React实现动效弹窗组件
2021/06/21 Javascript