AngularJS入門教程之與服務器(Ajax)交互操作示例【附完整demo源碼下載】
本文實例講述了AngularJS與服務器Ajax交互操作。分享給大家供大家參考，具體如下：
AngularJS從Web服務器請求資源都是通過Ajax來完成，所有的操作封裝在$http服務中，$http服務是只能接收一個參數(shù)的函數(shù)，這個參數(shù)是一個對象，用來完成HTTP請求的一些配置，函數(shù)返回一個對象，具有success和error兩個方法。
用法如下：
$http({method:'post',url:'loginAction.do'
}).success(function(data,status,headers,config){
//正常響應回調(diào)
}).error(function(data,status,headers,config){
//錯誤響應回調(diào)
});
狀態(tài)碼在200-299之間，會認為響應是成功的，success方法會被調(diào)用，第一個參數(shù)data為服務器端返回的數(shù)據(jù)，status為響應狀態(tài)碼。后面兩個參數(shù)不常用，這里不做介紹。有興趣的朋友請參考AngularJs API文檔。
除此之外$http服務提供了一些快捷方法，這些方法簡化了復雜的配置，只需要提供URL即可。比如對于post請求我們可以寫成下面這個樣子：
$http.post("loginAction.do")
.success(function(data,status,headers,config){
//正常響應回調(diào)
}).error(function(data,status,headers,config){
//錯誤響應回調(diào)
});
下面來看一個案例：
<!DOCTYPE html>
<html ng-app="serverMod">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial09</title>
</head>
<body ng-controller="ServerController" ng-init="init()">
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<button ng-click="getInfo()">請求</button>
</body>
<script>
var serverMod = angular.module("serverMod",[]);
serverMod.controller("ServerController",function($scope,$log,$http){
$scope.init = function()
{
$log.info("init functionn");
}
$scope.getInfo = function()
{
$http.get("json/person.json").success(function(data,status){
alert(status);
$scope.name = data.name;
$scope.age = data.age;
});
}
});
</script>
</html>
點擊”請求”按鈕，我們通過$http服務以get方式向服務器請求數(shù)據(jù)，服務器響應數(shù)據(jù)格式通常為一段Json，這里我們用一個文本文件代替，person.json內(nèi)容如下：
{"name":"Rongbo_J","age":"23"}
返回的數(shù)據(jù)會放在data參數(shù)中，我們可以獲取服務器響應的內(nèi)容將數(shù)據(jù)在視圖中展示出來。
完整demo實例代碼點擊此處本站下載。
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
本篇文章主要介紹了Angular如何引入第三方庫的方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Angular中使用ng-zorro圖標庫部分圖標不能正常顯示問題
這篇文章主要介紹了Angular中使用ng-zorro圖標庫部分圖標不能正常顯示問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
今天小編就為大家分享一篇angular1.x ui-route傳參的三種寫法小結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了淺談Angular6的服務和依賴注入，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了AngularJS表單校驗用法,結合實例形式分析了AngularJS各種常見的表單校驗功能及使用技巧,需要的朋友可以參考下2016-11-11
下面小編就為大家?guī)硪黄狝ngularJs 終極購物車的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
AngularJs bootstrap搭載前臺框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺框架js控制部分的資料，這里有實現(xiàn)代碼，有興趣的小伙伴可以參考下2016-09-09
Angularjs中ng-repeat-start與ng-repeat-end的用法實例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進行了簡單的介紹，而后通過完整的實例代碼詳細給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
下面小編就為大家?guī)硪黄狫avascript基礎_標記文字的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
在AngularJS中$interval用來處理間歇性處理一些事情,接下來通過本文給大家介紹AngularJS中$interval的用法，需要的朋友參考下2016-02-02