在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)至关重要。
- 粉丝: 3
- 资源: 926
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助