準備工作:
? 1.angular 1.3.2 下載地址:
https://code.angularjs.org/1.3.2/angular.min.js
? 2.相關(guān)文檔:
https://code.angularjs.org/1.3.20/docs/api/ng/service/$http
例子,點擊按鈕通過get,post方式獲取數(shù)據(jù),這里注意angular獲取數(shù)據(jù)是通過$http服務(wù)實現(xiàn)的,注意下面代碼不需要你懂,只要會用就好,就和你不懂jquery ajax方法實現(xiàn)不影響你使用它數(shù)據(jù)交互一樣。
首先上一個get的例子,get單詞換成post就是post方式。不墨跡上代碼,注意要想運行我的例子,要在服務(wù)器環(huán)境下,另外data.php并不復雜,
里面就一個數(shù)字12,完事兒。
上get例子:
<!DOCTYPE html>
<html ng-app="mk">
<head> <meta charset="utf- 8">
<style> </style>
<script src="angular.min.js"></script>
<script>
var app = angular.module('mk',[]);
app.controller('getData',function($scope,$http){
$scope.getData = function(){ $http.get('data.php').
success(function(data, status, headers, config) {
console.log(data+5); }).
error(function(data, status, headers, config) {
console.log(status);
});
};
});
</script>
</head>
<body><div ng-controller = "addMsg" id="div1">
<input type="button" value="獲取數(shù)據(jù)" ng-click = "getData()">
</div>
</body>
</html>
更多情況下我們使用jsonp跨域,這里是我隨便找的百度接口,地址后臺人員回給你,好,看jsonp方式
<!DOCTYPE html>
<html ng-app="mk">
<head> <meta charset="utf- 8">
<style> </style>
<script src="angular.min.js"></script>
<script>
var app = angular.module('mk',[]);
app.controller('addMsg',function($scope,$http){
$scope.getData = function(){
$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=JSON_CALLBACK&wd=aaa').
success(function(data, status, headers, config) {
var arr = data.s;
console.log(arr);
}).
error(function(data, status, headers, config) {
console.log(status);
});
};
});
</script>
</head>
<body><div ng-controller = "addMsg" id="div1">
<input type="button" value="獲取數(shù)據(jù)" ng-click = "getData()">
</div>
</body>
</html>
強調(diào)兩點
1.地址回調(diào)函數(shù)名字必須是 JSON_CALLBACK
? https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=JSON_CALLBACK&wd=aaa 使用地址
? https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&cb=show 原來的地址
2.注意
? 原來后臺人員給你cb你就用cb,如果后臺給你地址叫 callback=show 那你就把使用地址轉(zhuǎn)變?yōu)閏allbak