angular使用post、get向后台传参的问题实例


Posted in Javascript onMay 27, 2017

一、问题的来源

我们都知道向后台传参可以使用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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木

Javascript 相关文章推荐
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
AngularJS中使用ngModal模态框实例
May 27 #Javascript
angularJS模态框$modal实例代码
May 27 #Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 #Javascript
AngularJS入门教程一:路由用法初探
May 27 #Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 #Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 #Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php通过字符串调用函数示例
2014/03/02 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
深入理解vue中的$set
2017/06/01 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
培训主管的岗位职责
2013/11/23 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
私人委托书格式
2014/09/10 职场文书
学位证书委托书
2014/09/30 职场文书
MySQL触发器的使用
2021/05/24 MySQL