標籤：封裝 nts json charset 對象 x11 按鈕 文字檔 doc
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"
}
AngularJS入門教程之與伺服器(Ajax)互動操作樣本
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
