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

最近在使用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请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Angular性能优化之第三方组件和懒加载技术

    Angular性能优化之第三方组件和懒加载技术

    概述 应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和使用Angular,本文将以在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能. 环境准备 1.全局安装Angular CLI:npm install -g @angular/cli 2.使用Angular CLI创建一个新

  • Angular+ionic实现折叠展开效果的示例代码

    1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isSho

  • 关于angular引入ng-zorro的问题浅析

    ng-zorro的官网上提供了两种在项目中添加ng-zorro的方法,下面记录其提供的第二种自行构建的方式. 第一步:执行该命令创建新的angular项目,若没安装angular/cli请执行安装 ng new new-project 第二步:添加ng-zorro npm install ng-zorro-antd --save 第三步:引入模块 在app.module.ts文件中引入 import { NgZorroAntdModule } from 'ng-zorro-antd'; ....

  • Angular框架详解之视图抽象定义

    Angular框架详解之视图抽象定义

    前言 作为"为大型前端项目"而设计的前端框架,Angular 其实有许多值得参考和学习的设计,本系列主要用于研究这些设计和功能的实现原理.本文主要围绕 Angular 中与视图有关的一些定义进行介绍. Angular 中的视图抽象 Angular 版本可在不同的平台上运行:在浏览器中.在移动平台上或在 Web Worker 中.因此,需要特定级别的抽象来介于平台特定的 API 和框架接口之间. Angular 中通过抽象封装了不同平台的差异,并以下列引用类型的形式出现:ElementR

  • Angular进行简单单元测试的实现方法实例

    前言 之前对单元测试的认知就是复杂,难搞,思路有,就是不知道怎样去实现,最近一次开会解决问题的过程中,发现原来单元测试可以十分简单,简单到几行代码就能实现. 示例 下面代码实现的功能是,判断课程所在的学院<College> college是否在用户所有的学院Array<College> colleges中,如果存在,变量show赋值为true,不存在,则赋值为false,如果college为undefined或者null,也赋值为true. /** * 观察课程学院是否与用户所在学

  • AngularJS 中括号的作用详解

    1.括号的作用 1.1方括号 [ ] 属性名加上方括号后,右侧赋值为 表达式的值 如果属性没有方括号,右侧赋值为 字符串 <div class="red">red</div> //这里类名为red <div [class]="red">red</div> //这里类名为blue,就是说有方括号右侧为表达式 //组件中 red: string = "blue"; 1.2 圆括号( ) 圆括号用于事件绑

  • Angular+Ionic使用queryParams实现跳转页传值的方法

    最近,在做电商项目,项目中需要实现:点击编辑按钮,跳转页面完成添加地址,修改地址功能. 使用到angular传参,简单做一总结: 1,发送界面ts //编辑地址 EditorAddress(item) { console.log("选中的地址"); console.log(item); this.router.navigate(['/editor-address'], { queryParams: item }) } 2,接收界面ts public personName:string=

  • Angular短信模板校验代码

    1.短信模板内容 验证码 ${username} 12345 验证码 ${username} 12345 验证码 ${username} 12345 从代码中提取 username, 并判断验证码 username中只存在英文字母 2.内容校验,提取模板中${}的内容并且,内容只能使用英文 smsTemplateContentChange(value){ // 短信模板内容 校验 const error = this.smsTemplateForm.get('templateContent').

  • 浅谈Angular的12个经典问题

    浅谈Angular的12个经典问题

    1. 请解释Angular 2应用程序的生命周期hooks是什么? Angular 2组件/指令具有生命周期事件,是由@angular/core管理的.@angular/core会创建组件,渲染它,创建并呈现它的后代.当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它.Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作.构造函数会在所有生命周期事件之前执行.每个接口都有一个前缀为ng的hook方

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

    最近在使用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)

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

    最近在使用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)

  • axios 发 post 请求，后端接收不到参数的完美解决方案

    目录 问题场景 问题原因 要点1 要点2 问题分析 解决方案 解决方案一 解决方案二 解决方案三 解决方案四 解决方案五 解决方案六 问题场景 场景很简单,就是一个正常 axios post 请求: axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username, pwd } }) 后台说没有接收到你的传参. 这就有

  • Python requests发送post请求的一些疑点

    前言 在Python爬虫中,使用requests发送请求,访问指定网站,是常见的做法.一般是发送GET请求或者POST请求,对于GET请求没有什么好说的,而发送POST请求,有很多朋友不是很清楚,主要是因为容易混淆 POST提交的方式 .今天在微信交流群里,就有朋友遇到了这种问题,特地讲解一下. 在HTTP协议中,post提交的数据必须放在消息主体中,但是协议中并没有规定必须使用什么编码方式,从而导致了 提交方式 的不同.服务端根据请求头中的 Content-Type 字段来获知请求中的消息主体

  • 四步轻松实现ajax发送异步请求

    ajax发送异步请求,供大家参考,具体内容如下 第一步(得到XMLHttpRequest) ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!!! 1.得到XMLHttpRequest 大多数浏览器都支持:var xmlHttp=new XMLHttpRequest(); IE6.0:var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); IE5.0以更早版本的IE:var xmlHttp=new A

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • 防止重复发送Ajax请求的解决方案

    在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

  • java发送http请求并获取状态码的简单实例

    目前做项目中有一个需求是这样的,需要通过java发送url请求,查看该url是否有效,这时我们可以通过获取状态码来判断. try { URL u = new URL("http://10.1.2.8:8080/fqz/page/qizha/pros_add.jsp"); try { HttpURLConnection uConnection = (HttpURLConnection) u.openConnection(); try { uConnection.connect(); Sy

  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    首先说,出现这个问题的场景是很少见的,因为有太多更好解决方法.今天搞ajax的时候,一个有趣的地方,,每个迭代中都要发送一个get请求,因为迭代的速度太快,一个请求还没有完成就进行下一个迭代,在chrome和ff上,除最后一个请求外,其它请求都被取消了.所以该怎么办呢?设置延时(不太好)还是其他办法?  办法有很多,比如设置休眠,迭代等等, 我采用的是另外两种解决办法.  一.同步的ajax请求,而ajax请求默认是异步的,所以要设置为false. function creatXMLHttpRe

  • Nodejs 发送Post请求功能(发短信验证码例子)

    直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var

随机推荐