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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
js验证框架实现代码分享
May 18 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
JavaScript实现简单计算器功能
Dec 19 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
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
python提取内容关键词的方法
2015/03/16 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
股东协议书范本
2014/04/14 职场文书
相亲活动方案
2014/08/26 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis