AngularJS中$http使用的簡單介紹

更新時(shí)間：2017年03月17日 09:46:18 作者：EldonZhao

在AngularJS中主要使用$http服務(wù)與遠(yuǎn)程http服務(wù)器交互，本篇文章主要介紹了AngularJS中$http使用的簡單介紹，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。

在AngularJS中主要使用$http服務(wù)與遠(yuǎn)程http服務(wù)器交互，其作用類似于jquery中的$.ajax服務(wù)：

$http是AngularJS的一個(gè)核心服務(wù)，利用瀏覽器的xmlhttprequest或者via JSONP對(duì)象與遠(yuǎn)程HTTP服務(wù)器進(jìn)行交互；
與$.ajax相同，支持多種method請(qǐng)求：get、post、put、delete等；
controller中可通過與$scope同樣的方式獲取$http對(duì)象，形如：function controller($ http, $ scope){}；

$http使用說明：

$http服務(wù)使用如下面代碼所示：

// 1.5以下版本
$http(config)
.success(function(data, status, headers, config){//請(qǐng)求成功執(zhí)行代碼})
.error(function(data, status, headers, config){//請(qǐng)求失敗執(zhí)行代碼})

// 1.5以上版本
$http(config).then(
function successCallback(response){//請(qǐng)求成功執(zhí)行代碼},
function errorCallback(response){//請(qǐng)求失敗執(zhí)行代碼}
);

具體參數(shù)、方法說明：

配置參數(shù)：

config是請(qǐng)求的配置參數(shù)總集，格式為json；
包含的配置項(xiàng)包括：
method：字符串類型，請(qǐng)求方式如"GET","POST","DELETE"等；
url：字符串類型，請(qǐng)求的url地址；
params：json類型，請(qǐng)求參數(shù)，將在url上被拼接成?key=value的形式；
data：json類型，請(qǐng)求數(shù)據(jù)，將放在請(qǐng)求內(nèi)發(fā)送至服務(wù)器；
cache：bool類型，true表示http GET請(qǐng)求時(shí)采用默認(rèn)的$http cache，否則使用$cacheFactory的實(shí)例；
timeout：整數(shù)類型，超時(shí)時(shí)間；

回調(diào)函數(shù)：

success是請(qǐng)求成功后的回調(diào)函數(shù)；
error是請(qǐng)求失敗后的回調(diào)函數(shù)；
data是響應(yīng)體；
status是相應(yīng)的狀態(tài)值；
headers是獲取getter的函數(shù)；
config是請(qǐng)求中的config json對(duì)象；

method屬性可以作為config配置參數(shù)中的一個(gè)屬性，也可以直接作為方法調(diào)用，如：

$http.post(url, data, config)

$http使用范例：

var searchOplog = function ($http, table, btn) {
 $http({
  url: 'data/oplog.json',
  method: 'GET'
 }).then(function successCallback(response) {
  console.log('get Oplog success:', response);
  table.init(response.data);
  btn.button('reset');
  btn.dequeue();
 }, function errorCallback(response) {
  console.log('errorCallback Response is:', response);
  table.init();
  btn.button('reset');
  btn.dequeue();
 });
};

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

您可能感興趣的文章:

相關(guān)文章

Angularjs+bootstrap+table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能,需要的朋友可以參考下
2017-03-03
淺談angular2 組件的生命周期鉤子
本篇文章主要介紹了淺談angular2 組件的生命周期鉤子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
Angular 作用域scope的具體使用
本篇文章主要介紹了Angular 作用域的具體使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法
指令是angular的核心功能之一，用好了事半功倍，監(jiān)聽ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧。下面這篇文章主要介紹了Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法,需要的朋友可以參考下。
2016-12-12
高效利用Angular中內(nèi)置服務(wù)$http、$location等
這篇文章主要介紹了如何高效利用Angular中內(nèi)置服務(wù)，大家知道的Angular內(nèi)置服務(wù)有哪些，感興趣的小伙伴們可以參考一下
2016-03-03
使用angularjs創(chuàng)建簡單表格
AngularJS提供豐富填寫表單和驗(yàn)證。我們可以用ng-click來處理AngularJS點(diǎn)擊按鈕事件，然后使用 $dirty 和 $invalid標(biāo)志做驗(yàn)證的方式。使用novalidate表單聲明禁止任何瀏覽器特定的驗(yàn)證。下面我們來看看如何使用angularjs創(chuàng)建簡單表格
2016-01-01
Angular 路由route實(shí)例代碼
下面小編就為大家?guī)硪黄狝ngular 路由route實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
Angular.js 4.x中表單Template-Driven Forms詳解
Angular 4.x 中有兩種表單，一種是Template-Driven Forms - 模板驅(qū)動(dòng)式表單，另外一種是Reactive Forms - 響應(yīng)式表單，下面這篇文章主要給大家介紹了Angular.js 4.x中表單Template-Driven Forms的相關(guān)資料，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。
2017-04-04
AngularJS中關(guān)于ng-class指令的幾種實(shí)現(xiàn)方式詳解
這篇文章給大家介紹了angularJS中ng-class指令的三種實(shí)現(xiàn)方式，其中包括通過數(shù)據(jù)的雙向綁定、通過對(duì)象數(shù)組和通過key/value這三種方式，有需要的朋友們可以參考學(xué)習(xí)，下面來一起看看吧。
2016-09-09