本文執行個體講述了AngularJS與伺服器Ajax互動操作。分享給大家供大家參考，具體如下：
AngularJS從Web伺服器請求資源都是通過Ajax來完成，所有的操作封裝在$http服務中，$http服務是只能接收一個參數的函數，這個參數是一個對象，用來完成HTTP請求的一些配置，函數返回一個對象，具有success和error兩個方法。
用法如下：
$http({method:'post',url:'loginAction.do'}).success(function(data,status,headers,config){//正常響應回調}).error(function(data,status,headers,config){//錯誤響應回調});
狀態代碼在200-299之間，會認為響應是成功的，success方法會被調用，第一個參數data為伺服器端返回的資料，status為響應狀態代碼。後面兩個參數不常用，這裡不做介紹。有興趣的朋友請參考AngularJs API文檔。
除此之外$http服務提供了一些快捷方法，這些方法簡化了複雜的配置，只需要提供URL即可。比如對於post請求我們可以寫成下面這個樣子：
$http.post("loginAction.do").success(function(data,status,headers,config){//正常響應回調}).error(function(data,status,headers,config){//錯誤響應回調});
下面來看一個案例：
<!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方式向伺服器請求資料，伺服器響應資料格式通常為一段Json，這裡我們用一個文字檔代替，person.json內容如下：
{"name":"Rongbo_J","age":"23"}
返回的資料會放在data參數中，我們可以擷取伺服器響應的內容將資料在視圖中展示出來。
完整demo執行個體代碼點擊此處本站下載。
希望本文所述對大家AngularJS程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
