在AngularJS中,使用$http服务来获取后台数据是常见的需求,因为大多数Web应用都需要从服务器动态获取数据来更新页面。AngularJS内置的$http服务是一个用于进行HTTP请求的函数,它返回一个promise对象,使得可以链式调用.then()方法来处理请求成功或失败的回调函数。
### $http基本使用方法
在本文的实例中,首先创建了一个AngularJS模块和一个控制器,并在控制器中注入了$http服务和$scope服务。在控制器的函数体内,使用$http服务的get方法来发送一个GET请求到服务器的'1.php'接口,并通过then方法的回调函数获取响应数据。以下是详细步骤和代码示例:
1. 创建一个AngularJS模块和控制器:
```javascript
var app = angular.module('module', []);
```
2. 注入$http和$scope服务,并在控制器中进行GET请求:
```javascript
app.controller('ctrl', ['$scope', '$http', function($scope, $http){
$http({
method: 'get', // GET请求方式
url: '1.php' // 请求地址
}).then(function(response){
// 成功时执行的回调函数
console.log(response);
$scope.data = response.data; // 将获取的数据赋值给$scope.data
}, function(response){
// 失败时执行的回调函数
console.log(response);
});
}]);
```
### 使用$http简写方式
在AngularJS中,为简化书写,可以直接使用$http服务来调用GET或POST方法,而不需要显式地声明请求方法。这种方式可以减少代码量,提高开发效率。简写方式的代码示例如下:
```javascript
app.controller('ctrl', ['$scope', '$http', function($scope, $http){
$http.post('1.php').then(function(response){
// 成功时执行的回调函数
console.log(response);
$scope.data = response.data;
});
}]);
```
### $http服务的缓存操作
在AngularJS中,为了避免多次请求后台数据,可以通过设置$http服务的cache选项为true来启用缓存。这样,当页面刷新时,只会显示一次重复请求的数据,减少对服务器的负载。使用方式如下:
```javascript
$http({
method: 'get',
url: '1.php',
cache: true // 开启缓存操作
}).then(function(response){
// 成功时执行的回调函数
console.log(response);
$scope.data = response.data;
}, function(response){
// 失败时执行的回调函数
console.log(response);
});
```
### 使用$http进行POST请求
在某些场景下,我们需要通过POST请求向服务器发送数据。在AngularJS的$http服务中,可以通过传递一个data对象作为参数来发送POST请求。服务器端PHP脚本接收数据,并将数据以JSON格式返回给前端。以下是一个简单的POST请求示例:
1. AngularJS端的代码:
```javascript
app.controller('ctrl', ['$scope', '$http', function($scope, $http){
$http.post('1.php', {
id: 1,
name: '后盾人'
}).then(function(response){
// 成功时执行的回调函数
console.log(response.data);
$scope.data = response.data;
});
}]);
```
2. PHP端的代码:
```php
<?php
$data = [
['name' => '百度', 'url' => '***'],
['name' => '腾讯', 'url' => '***'],
];
echo json_encode($data, JSON_UNESCAPED_UNICODE);
```
以上就是使用AngularJS的$http服务来获取后台数据的基本操作方法。通过$http服务,可以方便地与服务器端进行交互,无论是GET还是POST请求都可以轻松实现。同时,通过配置cache选项,可以对请求进行优化,提高应用性能。这些知识点对于构建高性能的单页应用(SPA)至关重要。