angular使用post、get向后台传参的问题
一、问题的来源
我们都知道向后台传参可以使用get、put,其形式就类似于name=jyy&id=001。但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的。其实这个问题是因为请求头的缘故。在ng中默认的请求头是:“Content-Type":"application/json",也就是说传递参数是使用的就是json格式。但是后台默认的却是Content-Type': 'application/x-www-form-urlencoded'。因此在这样的情况下后台接收到的数据就会是空的。
那么为什么使用get形式就可以传参呢?在书中我发现这样的一句话:”这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化”,可以理解为在get中参数的传递是直接追加在url后面的,那么此时参数形式{"id":"1","name":"jyy"}会被转化成id=1&name=jyy追加在url后面。那么在后台中就可以直接获取到了。例如:
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$q,$http){
var defer = $q.defer();
var promise = defer.promise;
$http({
method: "get",
params:{id:1,name:jyy},
url:"1.php"
}).success(function(data){
defer.resolve(data);
});
promise.then(function(data){
$scope.data = data;
})
})
在后台(PHP)输入echo $_GET[id]就可以正常显示了。
那么接下来就研究怎么解决post的传值了。
二、问题的解决
1. 修改请求头
第一种方法就是在ng中修改请求头将json格式改成x-www-form-urlencoded。修改方法点击即可查看。
值得注意的是,在使用第二种方法时,可以修改put,get,post,common的传参格式。因此修改哪种方式,就只能使用这种方式才能在后台得到参数。这篇博文写到使用common进行设置可以同时使用put、get、post进行传参。但是在我的实际操作中发现对common进行修改并不能使用post进行传参,而只有设置了post的请求头才可以。
另外由于在ng中的参数都是使用json格式表达,因此需要引入jquery,使用其$.param("参数列表的json格式")进行序列化表示。
首先使用修改post请求头。具体代码如下:
var app = angular.module('app');
app.config(function($httpProvider){
$httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' }
})
app.controller('ctrl',function($scope,$resource,$q,$http){
var defer = $q.defer();
var promise = defer.promise;
$http({
method: "post",
data:$.param({"id":"1","name":"jyy"}),
url:"1.php"
}).success(function(data){
defer.resolve(data);
});
promise.then(function(data){
$scope.data = data;
})
})
此时在后台中(使用的是php),输入echo $_POST[id],就会显示。而debug其中显示的请求头正是我们设置的。
2.在后台进行解决
由于使用的是php,所以暂时用php的方法解决。在这个方法中,我们不修改请求头。因为get传值是正常的,那么,只要能够得到post的值就好。既然ng向后台传值了,即便是因为请求头不同,但是总会传过来什么的吧,既然能够传过来,就先获取它。这个时候使用$GLOBALS['HTTP_RAW_POST_DATA']将这个传过来的东西显示出来。那么这个$GLOBALS['HTTP_RAW_POST_DATA']是什么呢?在网上查询得知$HTTP_RAW_POST_DATA 变量包含有原始的 POST 数据。此变量仅在碰到未识别 MIME 类型的数据时产生,PHP不能识别的Content-Type类型的时候,会将http请求包中相应的数据填入变量$HTTP_RAW_POST_DATA。就是说现在这个请求头虽然是有冲突的,但是却能够显示出来。如下:
var app = angular.module('app',[]);
app.controller('ctrl',function($scope,$q,$http){
var defer = $q.defer();
var promise = defer.promise;
$http({
method: "post",
data:{'id':'1','name':'jyy'},
url:"1.php"
}).success(function(data){
defer.resolve(data);
});
promise.then(function(data){
$scope.data = data;
})
})
php代码:
echo $GLOBALS['HTTP_RAW_POST_DATA'];
此时显示出来的东西是:{"id":"1","name":"jyy"}。发现这个结果是正确显示了。那么直接对齐进行操作不就可以了?好吧,那就先看看是什么类型:使用gettype()得到的是string,就是说他是个json字符串。那就使用json_decode()转换,发现会报错。好吧,放弃使用这个方法。
但是此时还有另外的方法。使用file_get_contents("php://input"),这个方法中 php://input 是个可以访问请求的原始数据的只读流。 POST 请求的情况下,最好使用 php://input 来代替 $HTTP_RAW_POST_DATA,因为它不依赖于特定的 php.ini 指令。 此时这个方法就可以返回传过来的参数了。代码如下:
$a = json_decode(file_get_contents("php://input"));
echo $a->id;
结果输出正确的id。
angular使用post、get向后台传参的问题的更多相关文章
- Angular 项目开发中父子组件传参
在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...
- angularjs向后台传参,后台收不到数据
angularjs中封装了一个$http服务,用来请求远程资源 参见:HTTP API 其中封装过的$http.post和$http.get使用起来比较方便 后台是php,用$_POST['name' ...
- Angular:路由的配置、传参以及跳转
①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...
- Web jsp开发学习——前端后台传参方法
一.前端传后台: 1.1表单数据的传递 前端的表单里定义名字name 后台通过名字获取输入的值 1.2页面点击了哪个按钮传递 登录注销的另一种方式 点击登录的地方设置参数 ...
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
- JQuery Ajax 向后台传参方式
在jquery的ajax函数中,可以传入3种类型的数据 文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" jso ...
- axios post传参后台无法接收问题
起因是在angular项目中使用axios发送post请求,向后台传参后台一直无法接收,网上查了有说是请求头设置不对,需要把Content-Type:application/x-www-form-ur ...
- Ajax的使用及后台如何传参
Ajax的使用(此处为表单序列化方式) $.ajax({ type: 'post', data: $('#newPriorityForm').serialize(), dataType: 'json' ...
- 使用java传参调用exe并且获取程序进度和返回结果的一种方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在某个项目中需要考虑使用java后台调用由C#编写的切图程序( ...
随机推荐
- 携程App的网络性能优化实践
首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...
- PHP的静态和接口
静态普通成员普通成员属于对象//静态成员//静态成员属于类//static 关键字 变成静态成员/*class ren { public $name; public static $zho ...
- iOS-即时通讯-环信
下载地址:http://www.easemob.com/downloads SDK目录讲解 1.从官网下载下来的包分为如下四部分: 环信iOS SDK 开发使用 环信iOS release note ...
- Redux
redux是Flux的一种实现方式,但还是和Flux有些不同. React控制视图层,要想做一个完整的数据流,必须要用react-redux. 官方demo,自己收集了一下: demo1http:// ...
- SSIS Destination 组件使用Fast-Load mode出错
查看一个Package的历史Message 数据,发现 DataFlow Task 经常出错,错误信息的Description是: Description: "While reading c ...
- 解密jQuery事件核心 - 自定义设计(三)
接上文http://www.cnblogs.com/aaronjs/p/3447483.html 本文重点:自定义事件 “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率 ...
- 被嫌弃的eval和with
× 目录 [1]eval [2]with 前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过 ...
- 亚马逊云架设WordPress博客
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 这篇文章介绍如何在亚马逊云架设WordPress博客.最强的云,加上最流行的建站工 ...
- Description Resource Path Location Type Error executing aapt: Return code -1073741819 Client line 1
Logcat报错:Description Resource Path Location Type Error executing aapt: Return code -1073741 ...
- 如何为RD网关创建自建签名的证书
创建安全的RD网关是一件非常好的事情,这样可以在公网环境下直接远程接入内部的已开启远程访问的主机服务器. 建立这个安全的RD网关需要的材料有RD网关本身,以及一个证书.由于一般情况下这些在RD网关后面 ...