欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

关于AngularJs中$http post、get 发送和接受参数详解 特别是最后两个例子 有大用 有大大用 有大大大用 有大大大大用

下面是我自己亲自做的 有大用 有大大用 
$http({
method:'POST',
url:'ajax_add_xiaonenzhibantime',
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
data:$.param({'banci_id':banci_id,'day':day,'month':$scope.month,'year':$scope.year,'persons[]':$scope.persons})
}).then(
function(data){
//$('#banci_dialog').fadeOut('fast',function(){
       //    $('#id_alert_bg').css('display','none');
       //});
       //$scope.bancis = data.data;
       //console.log($scope.bancis);
   
},
function(error){
$log.log(error.data)
}
)



下面的部分有大用 有大大用 


一、问题的来源    

  我们都知道向后台传参可以使用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格式")进行序列化表示。

     $.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[HTTPRAWPOSTDATA]西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。

  3. 可以见下面的解决方法   

 

来自  https://www.cnblogs.com/jyybeam/p/6122346.html


AngularJS发起$http.post请求收不到返回的数据,结果为null

解决方案:

  1. 配置$httpProvider:

    复制代码
    var myApp = angular.module('app',[]);  
     myApp.config(function($httpProvider){  
    
       $httpProvider.defaults.transformRequest = function(obj){  
         var str = [];  
         for(var p in obj){  
           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));  
         }  
         return str.join("&");  
       }  
    
       $httpProvider.defaults.headers.post = {  
            'Content-Type': 'application/x-www-form-urlencoded'  
       }  
    
    });  
    复制代码

     

  2. 或者在post中配置:

    复制代码
    $http({  
       method:'post',  
       url:'post.php',  
       data:{name:"aaa",id:1,age:20},  
       headers:{'Content-Type': 'application/x-www-form-urlencoded'},  
       transformRequest: function(obj) {  
         var str = [];  
         for(var p in obj){  
           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));  
         }  
         return str.join("&");  
       }  
    }).success(function(req){  
           console.log(req);  
    })  
    复制代码

     

来自  https://www.cnblogs.com/smallzhu/p/8182665.html




angularjs的$http.post和$http.get的使用

2016年11月11日 12:59:40 tonywuke 阅读数 5075                                    


版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。                                    
本文链接:https://blog.csdn.net/tonywuke/article/details/53127834                                    
                               

一、$http.post

1.基本语法:


                                   

  1. $http.post('url',{},{})
  2. .success(function(data,status,headers,config){
  3. })
  4. .error(function(data,status,headers,config){
  5. })
                                   


                                   

2.接受三个参数:

1) url: 请求的路径

2) 请求发送的数据: json对象 {name:'tony'}     (在后端应该用req.body接收)
                                   

3)请求配置的参数: json对象 {params: {id:5}}, 这样得到的实际路径就是url?id=5    (在后端应该用req.query接收)
                                   

3.返回的对象有两个回调方法:

1)success: 请求成功的回调

2)error: 请求失败的回调

这两个方法都有四个参数:

 ①data: 返回的数据(或错误)

 ②status: 响应的状态码

 ③headers: 一个函数

 ④congfig: 请求的配置对象


                                   

二、$http.get

1.基本语法


                                   

  1. $http.get('url',{})
  2. .success(function(data,status,headers,config){
  3. })
  4. .error(function(data,status,headers,config){
  5. })
                                   


                                   

2.接受两个参数:

1) url: 请求的路径

2)请求配置的参数:json对象 {params:{id:5}} , 这样得到的实际路径就是url?id=5   (在后端应该用req.query接收)
                                   

3.返回的对象有两个回调方法:

同$http.post


                                   

三、$http.post与$http.get的区别

$http.post接收三个参数,$http.get接收两个参数,$http.post比$http.get多了一个“请求发送的数据”。

另外在后端接收“请求发送的数据”和“请求配置的参数”的时候略有区别,“请求发送的数据”是一个json对象,在后端应该用req.body接收;
                                   

“请求配置的参数”是一个嵌套的json对象必须是 {params: json对象}, 在后端应该用req.query接收。



                       

来自  https://blog.csdn.net/tonywuke/article/details/53127834                        


                       

关于AngularJs中$http post、get 发送和接受参数详解                        

                            1.2k 次阅读  ·  读完需要 3 分钟                        
0        
   


   


   

关于AngularJs中$http post、get 发送和接受参数详解

$http({method: 'post', url: './feedback/mail',

data:{content:content,mailOrqq:mailOrqq,type:'chat-page-feedback'}

}).success(function(data, status, headers, config) {

   console.log("IT部落是个神奇的网站");
   

}).error(function(data, status, headers, config){

console.error('我错了');

});

$http({method: 'GET',url:'./topic/getTopicCommentList',

           params:{topicId:$stateParams.topicId}

       }).success(function(data, status, headers, config) {})

       .error(function(data, status, headers, config){});
   

聪明的你一定看出来了,POST最好用Data携带数据、GET最好用params携带数据,两者使得区别如下描述: 
params – {Object.<string|Object>} – Map of strings or objects which will be serialized with theparamSerializer and appended as GET parameters.
data – {string|Object} – Data to be sent as the request message data.


来自 https://segmentfault.com/a/1190000008794854



$http.get请求数据的格式    

[js] view plain copy            
  1. $http.get(URL,{  

  2.     params: {  

  3.         "id":id  

  4.     }  

  5. })  

  6. .success(function(response, status, headers, config){  

  7.       

  8. })  

 

$http.post请求数据的格式    

[js] view plain copy            
  1. $http.post(URL,{  

  2.     "id":id  

  3. })  

  4. .success(function(response, status, headers, config){  

  5.   

  6. })  

 

tips:

get 和 post方法传递参数的方式不一样

 

[java] view plain copy            
  1. //分享商品 list 列表  

  2. .factory("shareGoodsListService",["$http",function($http){  

  3.     return {  

  4.         //得到所有的收货地址  

  5.         updateAddress : function(__scope__,addrid){  

  6.   

  7.             //获取地址的值  

  8.             var Province = $("select[name='Province']").val();  

  9.             var City = $("select[name='City']").val();  

  10.             var Area = $("select[name='Area']").val();  

  11.   

  12.             var formData = {  

  13.                 id:addrid,  

  14.                 name:__scope__.formData.name,  

  15.                 mobile:__scope__.formData.mobile,  

  16.                 province:Province,  

  17.                 city:City,  

  18.                 area:Area,  

  19.                 address:__scope__.formData.address,  

  20.                 zip:__scope__.formData.zip,  

  21.                 submit:"submit"  

  22.             };  

  23.   

  24.             $http.post("{:U('AddressInfo/editAddress')}",formData).success(function(response, status, headers, config){  

  25.                 if(response.status == 1){  

  26.                     alert("修改成功!");  

  27.                 }  

  28.             })  

  29.         },  

  30.         getAddress:function(){  

  31.             //$http.get方法 传递参数使用的是 {params:jsonObj}  

  32.             $http.get("{:U('AddressInfo/editAddress')}",{  

  33.                 params: {  

  34.                     "id":id  

  35.                 }  

  36.             })  

  37.             .success(function(response, status, headers, config){  

  38.                 //获取地址的数据  

  39.                 if(response.status == 1){  

  40.                     __scope__.formData = {  

  41.                         name:response.data.name,  

  42.                         mobile:response.data.mobile,  

  43.                         address:response.data.address,  

  44.                         zip:response.data.zip  

  45.                     };  

  46.                     //默认收货地址的值  

  47.                     new PCAS("Province","City","Area",response.data.province,response.data.city,response.data.area);  

  48.                 }  

  49.             })  

  50.         }  

  51.   

  52.     }  

  53. }])  

分类: Angularjs    


来自 https://www.cnblogs.com/swarb/p/9924220.html




普通分类: