AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法

更新時(shí)間：2018年10月09日 09:35:31 作者：古飛龍

今天小編就為大家分享一篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在cordova開(kāi)發(fā)的時(shí)候使用到了$http的post方法，傳遞的參數(shù)服務(wù)端怎么都接收不到，搜索了下，發(fā)現(xiàn)使用AngularJS通過(guò)POST傳遞參數(shù)還是需要設(shè)置一些東西才可以！

1、不能直接使用params

例如：

$http({    
method: "POST",    
url: "http://192.168.2.2:8080/setId",    
params: { 
cellphoneId: "b373fed6be325f7"}  
}).success();

當(dāng)你這樣寫的時(shí)候它會(huì)把id寫到url后面：

http://192.168.2.2:8080/setId？cellphoneId=b373fed6be325f7"

會(huì)在url后面添加"？cellphoneId=b373fed6be325f7",查了些資料發(fā)現(xiàn)params這個(gè)參數(shù)是用在GET請(qǐng)求中的，而POST/PUT/PATCH就需要使用data來(lái)傳遞;

2、直接使用data

$http({ 
   method: "POST", 
   url: "http://192.168.2.2:8080/setId", 
   data: {
 cellphoneId: "b373fed6be325f7"
} }).success();

這樣的話傳遞的，是存在于Request Payload中，后端無(wú)法獲取到參數(shù)

AngularJS $http post

這時(shí)發(fā)現(xiàn)Content-Type:application/json;charset=UTF-8,而POST表單請(qǐng)求提交時(shí)，使用的Content-Type是application/x-www-form-urlencoded，所以需要把Content-Type修改下！

3、修改Content-Type

$http({ 
   method: "POST", 
   url: "http://192.168.2.2:8080/setId", 
   data: {cellphoneId: "b373fed6be325f7"},
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
 }).success();

AngularJS $http post

這時(shí)數(shù)據(jù)是放到了Form Data中但是發(fā)現(xiàn)是以對(duì)象的形式存在，所以需要進(jìn)行序列化！

4、對(duì)參數(shù)進(jìn)行序列化

$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();

以上這篇AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。
2017-07-07
AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框,涉及基于AngularJS的事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
對(duì)angularJs中ng-style動(dòng)態(tài)改變樣式的實(shí)例講解
今天小編就為大家分享一篇對(duì)angularJs中ng-style動(dòng)態(tài)改變樣式的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
angular2+nodejs實(shí)現(xiàn)圖片上傳功能
這篇文章主要介紹了angular2+nodejs實(shí)現(xiàn)圖片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Angular依賴注入系統(tǒng)里Injection token PLATFORM_ID使用場(chǎng)景詳解
這篇文章主要為大家介紹了Angular依賴注入系統(tǒng)里Injection token PLATFORM_ID使用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個(gè)指令,這篇文章就來(lái)介紹這個(gè)指令的用法.有需要的小伙伴可以參考下。
2015-06-06
Angular 2 利用Router事件和Title實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面標(biāo)題的方法
本篇文章主要介紹了Angular 2 利用Router事件和Title實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面標(biāo)題的方法，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08
在 Angular-cli 中使用 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā) API Mock 接口數(shù)據(jù)模擬功能的方法
這篇文章主要介紹了在 Angular-cli 中使用 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā) API Mock 接口數(shù)據(jù)模擬功能的方法,需要的朋友可以參考下
2018-11-11
AngularJS使用ng-inlude指令加載頁(yè)面失敗的原因與解決方法
這篇文章主要介紹了AngularJS使用ng-inlude指令加載頁(yè)面失敗的原因與解決方法,對(duì)比不同瀏覽器錯(cuò)誤提示分析了加載失敗的原因及通過(guò)http訪問(wèn)的解決方法,需要的朋友可以參考下
2017-01-01
AngularJs學(xué)習(xí)第八篇過(guò)濾器filter創(chuàng)建
這篇文章主要介紹了AngularJs學(xué)習(xí)第八篇過(guò)濾器filter創(chuàng)建的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06