快捷導(dǎo)航

AngularJS入門教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】

更新時(shí)間：2016年11月02日 11:19:26 作者：Rongbo_J

這篇文章主要介紹了AngularJS與服務(wù)器Ajax交互操作的方法,可實(shí)現(xiàn)post傳輸數(shù)據(jù)的功能,并附帶完整的demo源碼供讀者下載參考,源碼中還包含了前面章節(jié)的示例文件,需要的朋友可以參考下

本文實(shí)例講述了AngularJS與服務(wù)器Ajax交互操作。分享給大家供大家參考，具體如下：

AngularJS從Web服務(wù)器請(qǐng)求資源都是通過Ajax來完成，所有的操作封裝在$http服務(wù)中，$http服務(wù)是只能接收一個(gè)參數(shù)的函數(shù)，這個(gè)參數(shù)是一個(gè)對(duì)象，用來完成HTTP請(qǐng)求的一些配置，函數(shù)返回一個(gè)對(duì)象，具有success和error兩個(gè)方法。

用法如下：

$http({method:'post',url:'loginAction.do'
}).success(function(data,status,headers,config){
//正常響應(yīng)回調(diào)
}).error(function(data,status,headers,config){
//錯(cuò)誤響應(yīng)回調(diào)
});

狀態(tài)碼在200-299之間，會(huì)認(rèn)為響應(yīng)是成功的，success方法會(huì)被調(diào)用，第一個(gè)參數(shù)data為服務(wù)器端返回的數(shù)據(jù)，status為響應(yīng)狀態(tài)碼。后面兩個(gè)參數(shù)不常用，這里不做介紹。有興趣的朋友請(qǐng)參考AngularJs API文檔。

除此之外$http服務(wù)提供了一些快捷方法，這些方法簡(jiǎn)化了復(fù)雜的配置，只需要提供URL即可。比如對(duì)于post請(qǐng)求我們可以寫成下面這個(gè)樣子：

$http.post("loginAction.do")
.success(function(data,status,headers,config){
//正常響應(yīng)回調(diào)
}).error(function(data,status,headers,config){
//錯(cuò)誤響應(yīng)回調(diào)
});

下面來看一個(gè)案例：

<!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()">請(qǐng)求</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>

點(diǎn)擊”請(qǐng)求”按鈕，我們通過$http服務(wù)以get方式向服務(wù)器請(qǐng)求數(shù)據(jù)，服務(wù)器響應(yīng)數(shù)據(jù)格式通常為一段Json，這里我們用一個(gè)文本文件代替，person.json內(nèi)容如下：