快捷導(dǎo)航

angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法

更新時(shí)間：2017年05月18日 17:05:53 作者：xiaoxiang-chen

本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法，分別介紹了$http.post和$http.get請(qǐng)求的方法，有興趣的可以了解一下

AngularJS發(fā)起$http.post請(qǐng)求

代碼如下：

$http({ 
  method:'post', 
  url:'post.php', 
  data:{name:"aaa",id:1,age:20} 
}).success(function(req){ 
  console.log(req); 
})

這時(shí)候你會(huì)發(fā)現(xiàn)收不到返回的數(shù)據(jù)，結(jié)果為null，這是因?yàn)橐D(zhuǎn)換成form data。

解決方案：

配置$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' 
  } 

});

或者在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); 
})

AngularJS發(fā)起$http.post請(qǐng)求

代碼如下：

  app.controller('sprintCtrl', function($scope, $http) {
      $http.get("http://localhost:8080/aosapp/pt/service?formid=pt_aosapp_service_sprintlist&teamid=1")
      .success(function (response) {console.log($scope.sprintlist=response);});
    });

其實(shí)，angularjs 和 jquery js最大的區(qū)別在哪兒那，angularjs是你事先在心中構(gòu)建好真?zhèn)€頁(yè)面，然后用變量或者占位符來表示數(shù)據(jù)，數(shù)據(jù)來了，直接填充就可以了；而jquery則是動(dòng)態(tài)的修改dom元素，如添加修改dom標(biāo)簽等。設(shè)計(jì)思想不一樣。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular中innerHTML標(biāo)簽的樣式不起作用的原因解析
這篇文章主要介紹了Angular中innerHTML標(biāo)簽的樣式不起作用詳解 ,本文給出了解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
AngularJS中的Directive自定義一個(gè)表格
本篇文章給大家介紹在angularjs中自定義一個(gè)有關(guān)表格的directive，涉及到angularjs directive相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
Angularjs中的$apply及優(yōu)化使用詳解
angular js的雙向數(shù)據(jù)綁定，在開發(fā)中起到的作用灰常大，所以下面這篇文章主要給大家介紹了關(guān)于Angularjs中$apply及優(yōu)化使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧
2018-07-07
詳解angular中如何監(jiān)控dom渲染完畢
AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁(yè)Web應(yīng)用。這篇文章主要介紹了詳解angular中如何監(jiān)控dom渲染完畢，有興趣的可以了解一下。
2017-01-01
Angular X中使用ngrx的方法詳解（附源碼）
ngrx是一套利用RxJS的類庫(kù)，下面這篇文章主要給大家介紹了關(guān)于Angular X中使用ngrx的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-07-07
基于AngularJS前端云組件最佳實(shí)踐
這篇文章主要為大家詳細(xì)介紹了基于AngularJS前端云組件最佳實(shí)踐,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進(jìn)行了簡(jiǎn)單的介紹，而后通過完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-12-12
Angular在模板驅(qū)動(dòng)表單中自定義校驗(yàn)器的方法
本章介紹的是如何對(duì)模板驅(qū)動(dòng)表單創(chuàng)建自定義校驗(yàn)器，它相比較響應(yīng)式表單自定義校驗(yàn)器略為復(fù)雜一些。接下來通過本文給大家分享Angular在模板驅(qū)動(dòng)表單中自定義校驗(yàn)器的方法，感興趣的朋友一起看看吧
2017-08-08
AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制,結(jié)合實(shí)例形式分析了AngularJS雙向數(shù)據(jù)綁定機(jī)制的原理及實(shí)現(xiàn)方法,以及減少需要重復(fù)開發(fā)代碼量的優(yōu)勢(shì),需要的朋友可以參考下
2017-01-01
簡(jiǎn)述AngularJS相關(guān)的一些編程思想
這篇文章主要介紹了AngularJS相關(guān)的一些編程思想,AngularJS是一款熱門的JavaScript庫(kù),推薦!需要的朋友可以參考下
2015-06-06