• ANGULAR $HTTP请求


    一、问题的来源

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

    转载自:http://www.cnblogs.com/liuhongjin/p/6202141.html

  • 相关阅读:
    Spring Boot Admin 添加报警提醒和登录验证功能!
    安卓平板体验Java开发,还能白嫖一年阿里无影云,真香!
    Java中停止线程的3种方式
    Nacos中服务删除不了,怎么办?
    面试突击30:线程池是如何执行的?拒绝策略有哪些?
    面试突击25:sleep和wait有什么区别
    SpringCloud Nacos + Ribbon 调用服务的 2 种方法!
    为什么start方法不能重复调用?而run方法却可以?
    Spring Cloud Alibaba Nacos 服务注册与发现功能实现!
    多图|一文详解Nacos参数!
  • 原文地址:https://www.cnblogs.com/alinaxia/p/6224336.html
Copyright © 2020-2023  润新知