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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php命令行模式代码实例详解
2021/02/26 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python3实现随机数
2018/06/25 Python
详解Python中的测试工具
2019/06/09 Python
python hashlib加密实现代码
2019/10/17 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
黄金搭档广告词
2014/03/21 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
邀请书格式范文
2015/02/02 职场文书
员工自我评价范文
2015/03/11 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS