<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller='mainController'>
<script src="angular.js"></script>
<script>
angular.module('myApp',).controller('mainController',['$scope','$http',function($scope,$http,$scope){
$http.get('api/1.php').success(function(data,status,headers,config){
console.log(data)
}).error(function(data,status,headers,config){
});
}]);
</script>
</body>
</html>
$http作为ng的一个重要的service，它有下面这些方法：
<script>
$http({
method:string,//有GET,POST,DELETE,PUT,JSONP
url:string,
params:string,
data:string or object,
header:object,
transformRequest:
transformResponse:
cache:
timeout:
withCreditials:
})
</script>
$http默认的headers有:Accept:application/json,text/plain当然，你可以把默认的的header改一下：
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller='mainController'>
<script src="angular.js"></script>
<script>
angular.module('myApp',)
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}])
.controller('mainController',['$scope','$http',function($scope,$http,$scope){
$http.get('api/1.php').success(function(data,status,headers,config){
console.log(data)
}).error(function(data,status,headers,config){
})
}]);
</script>
</body>
</html>
ef7caa6931c63016be34a40662f1c105.png
我们可以用transformRequest方法将响应进行转换：
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller='mainController'>
<script src="jquery-1.11.3.js"></script>
<script src="angular.js"></script>
<script>
angular.module('myApp',)
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
$httpProvider.defaults.transformRequest = function(data){
// console.log($.param)
return $.param(data);
};
}])
.controller('mainController',['$scope','$http',function($scope,$http,$scope){
$http.get('api/1.php',{params:{id:4,name:'moyu'}}).success(function(data,status,headers,config){
console.log(data)
}).error(function(data,status,headers,config){
})
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller='mainController'>
<script src="jquery-1.11.3.js"></script>
<script src="angular.js"></script>
<script>
angular.module('myApp',[])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
// $httpProvider.defaults.transformRequest = function(data){
// // console.log($.param)
// return $.param(data);
// };
}])
.controller('mainController',['$scope','$http',function($scope,$http,$scope){
$http
.get('api/1.php',{params:{id:4,name:'moyu'}})
.then(function successCb(data){console.log(data)},function errorCb(data){console.log(data)});
}]);
</script>
</body>
</html>
如果你们后台给力，可以尝试用$resource或restangular实现resuful
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-controller='mainController'>
<script src="underscore.js"></script>
<script src="angular.js"></script>
<script src="restangular.js"></script>
<script>
angular
.module('myApp',['restangular'])
.controller('mainController',['Restangular','$scope',function(Restangular,$scope){
console.log(Restangular.all('users.php'))
}])
</script>
</body>
</html>
网友评论