两分钟会用angular数据交互和jsonp跨域
2017-01-30 本文已影响230人
彬哥头发多
本文旨在两分钟内让你能够用angular进行数据交互。
准备工作：
1.angular 1.3.2 下载地址：https://code.angularjs.org/1.3.2/angular.min.js
2.相关文档：https://code.angularjs.org/1.3.20/docs/api/ng/service/$http
例子，点击按钮通过get,post方式获取数据，这里注意angular获取数据是通过$http服务实现的，注意下面代码不需要你懂，只要会用就好，就和你不懂jquery ajax方法实现不影响你使用它数据交互一样。
首先上一个get的例子，get单词换成post就是post方式。不墨迹上代码，注意要想运行我的例子，要在服务器环境下，另外data.php并不复杂，
里面就一个数字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.post('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="获取数据" 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="获取数据" ng-click = "getData()">
</div>
</body>
</html>
强调两点
1.地址回调函数名字必须是 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 那你就把使用地址转变为callbak
最后一句，js大法好，信leo，得永生。
