AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解
AngularJS作為一個(gè)非常實(shí)用的前端框架，我們知道在AngularJS中有自己的Model和Controler。
angularJS中所有的請(qǐng)求都是通過(guò)js定義的Controler來(lái)完成的，也就是我們完全脫離了后臺(tái)，
將整個(gè)應(yīng)用程序的壓力交給了客戶端來(lái)完成。但是在實(shí)際開(kāi)發(fā)的時(shí)候我們難免需要訪問(wèn)后臺(tái)或者
與數(shù)據(jù)庫(kù)進(jìn)行交互，這個(gè)時(shí)候我們就需要一個(gè)類(lèi)似于JQAJAX的方法來(lái)進(jìn)行數(shù)據(jù)訪問(wèn)。
在angularJS中提供了一種與遠(yuǎn)程Http服務(wù)器交互的服務(wù)，$http
$http是angularJS中的一個(gè)可信服務(wù)，利用瀏覽器的XMLHTTPRequest核心對(duì)象與遠(yuǎn)程http服務(wù)器進(jìn)行交互。
$http的使用方法也不難理解，與Jquery提供的$ajax操作比較類(lèi)似。也支持get、post等。
使用格式：
// 簡(jiǎn)單的 GET 請(qǐng)求，可以改為 POST
$http({
method:'post',//提交方式
url:'Account/DoLogin',//提交路徑
data:$scope.user,//傳遞到后臺(tái)的數(shù)據(jù)，json對(duì)象
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}, //當(dāng)post方式提交的時(shí)候需要加上這段來(lái)解決后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題
transformRequest: function ( data ) {
var str = '';
for( var i in data ) {
str += i + '=' + data[i] + '&';
}
return str.substring(0,str.length-1);
}//解析json對(duì)象的自定義函數(shù)
}).then(function successCallback(response)
{
//請(qǐng)求成功執(zhí)行的代碼
},function errorCallback(response)
{
//請(qǐng)求失敗執(zhí)行的代碼
});
POST與GET簡(jiǎn)寫(xiě)方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
以上這篇AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Angular 2+時(shí)如何去除url中#號(hào)的相關(guān)資料，文中先對(duì)#號(hào)去除的原因及方法進(jìn)行詳細(xì)的介紹和分析，然后通過(guò)示例代碼給大家演示去除的方法，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起看看吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了AngularJS過(guò)濾器的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了AngularJS多視圖切換用法,結(jié)合實(shí)例形式分析了AngularJS基于多視圖切換實(shí)現(xiàn)碎片文件動(dòng)態(tài)載入的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
angular2路由之routerLinkActive指令【推薦】
這篇文章主要介紹了angular2路由之routerLinkActive指令的相關(guān)資料,需要的朋友可以參考下2018-05-05
從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過(guò)本文，你將學(xué)會(huì)使用?resolver，?在?Angular?App?中應(yīng)用?resolver，應(yīng)用到一個(gè)公共的預(yù)加載導(dǎo)航，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
將angular-ui的分頁(yè)組件封裝成指令的方法詳解
這篇文章主要給大家介紹了將angular-ui的分頁(yè)組件封裝成指令的方法，文中介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作覺(jué)有一定的參考價(jià)值，需要的朋友下面來(lái)一起看看吧。2017-05-05
本文介紹了AngularJS 多指令Scope問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Angular4實(shí)現(xiàn)圖片上傳預(yù)覽路徑不安全問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
本篇文章主要介紹了深究AngularJS中$sce的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
不知道大家是否遇到過(guò)這個(gè)問(wèn)題，在當(dāng)Angular.JS ng-repeat數(shù)組中有重復(fù)項(xiàng)時(shí)，系統(tǒng)就會(huì)拋出異常，這是該怎么做？本文通過(guò)示例代碼介紹了詳細(xì)的解決方法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10