AngularJS $http post 傳遞參數數據

在cordova開發的時候使用到了$http的post方法,傳遞的參數服務端怎麼都接收不到,搜索了下,發現使用AngularJS經過POST傳遞參數仍是須要設置一些東西才能夠!
1、不能直接使用params
例如:
[javascript] view plain copy
$http({    
            method: "POST",    
            url: "http://192.168.2.2:8080/setId",    
            params: {  
        cellphoneId: "b373fed6be325f7"  
}  
        }).success();  



當你這樣寫的時候它會把id寫到url後面:
[javascript] view plain copy
http://192.168.2.2:8080/setId?cellphoneId=b373fed6be325f7"  
會在url後面添加"?cellphoneId=b373fed6be325f7",查了些資料發現params這個參數是用在GET請求中的,而POST/PUT/PATCH就須要使用data來傳遞;
2、直接使用data
[javascript] view plain copy
$http({    
            method: "POST",    
            url: "http://192.168.2.2:8080/setId",    
            data: {  
        cellphoneId: "b373fed6be325f7"  
} }).success();  


這樣的話傳遞的,是存在於Request Payload中,後端沒法獲取到參數

這時發現Content-Type:application/json;charset=UTF-8,而POST表單請求提交時,使用的Content-Type是application/x-www-form-urlencoded,因此須要把Content-Type修改下!
三、修改Content-Type
[javascript] view plain copy
$http({    
            method: "POST",    
            url: "http://192.168.2.2:8080/setId",    
            data: {cellphoneId: "b373fed6be325f7"},  
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }  
 }).success();  


這時數據是放到了Form Data中可是發現是以對象的形式存在,因此須要進行序列化!
4、對參數進行序列化
[html] view plain copy
$http({      
            method: "POST",      
            url: "http://192.168.2.2:8080/setId",      
            data: {cellphoneId: "b373fed6be325f7"},    
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },    
               transformRequest: function(obj) {    
          var str = [];    
          for (var s in obj) {    
            str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));    
          }    
          return str.join("&");    
        }    
 }).success();    


[javascript] view plain copy
<pre code_snippet_id="2045584" snippet_file_name="blog_20161212_3_2739910"></pre>  
<pre></pre>  
<pre></pre>  
<pre></pre>  
<pre></pre>  
<pre></pre>  
     

http://blog.csdn.net/gufeilong/article/details/53584967javascript

相關文章
相關標籤/搜索