实例详解angularjs和ajax的结合使用

当我们在开发前端网站时，经常需要使用异步请求获取数据来更新网站的内容。同时，随着前端框架的不断发展，AngularJS成为了一款非常流行的前端框架之一。本文将深入探讨AngularJS和AJAX的结合使用，为读者提供使用AngularJS和AJAX来实现异步请求的具体方案。

AngularJS和AJAX

AngularJS是由Google开发的一款前端MVC框架。它的主要优势是数据双向绑定、依赖注入、模块化等特点，从而可以大大提高开发效率。而AJAX则是一种用于在后台与服务器进行异步数据交换的技术。

因此，使用AngularJS和AJAX结合起来，就可以实现前端对服务器端数据进行异步请求的功能。

使用AngularJS和AJAX实现异步请求

在使用AngularJS和AJAX实现异步请求的时候，我们需要先引入jQuery或Zepto等库，然后再在AngularJS中使用$http服务。

示例1

下面是一个使用AngularJS和AJAX结合使用的示例代码：

// index.html
<div ng-controller="myCtrl">
  <button ng-disabled="loading" ng-click="getData()">获取数据</button>
  <div ng-show="loading">正在加载...</div>
  <div ng-show="!loading">{{data}}</div>
</div>

// app.js
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope, $http) {
  $scope.loading = false;
  $scope.getData = function() {
    $scope.loading = true;
    $http.get('/api/data')
      .success(function(data, status, headers, config) {
        $scope.loading = false;
        $scope.data = data;
      })
      .error(function(data, status, headers, config) {
        $scope.loading = false;
        alert('获取数据失败！');
      });
  };
});

在这个示例代码中，当点击“获取数据”按钮时，会通过$http服务对服务器发送GET请求。当请求成功时，$scope.data将会被设置为返回的数据；当请求失败时，则会显示“获取数据失败！”的提示信息。

示例2

另外一个使用AngularJS和AJAX结合使用的示例是使用自定义指令来实现异步请求。

// index.html
<div ng-app="myApp" ng-controller="myCtrl">
  <my-ajax url="/api/data" loading-text="正在加载..." error-text="获取数据失败！"
    success-callback="successCallback(data)"></my-ajax>
  <div ng-show="data">{{data}}</div>
</div>

// app.js
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
  $scope.successCallback = function(data) {
    $scope.data = data;
  };
});
myApp.directive('myAjax', function($http) {
  return {
    restrict: 'E',
    scope: {
      url: '@',
      loadingText: '@',
      errorText: '@',
      successCallback: '&'
    },
    template: '<div ng-show="loading">{{loadingText}}</div>' +
              '<div ng-show="error">{{errorText}}</div>',
    link: function(scope, element, attrs) {
      scope.loading = false;
      scope.error = false;
      scope.$watch('url', function() {
        scope.loading = true;
        $http.get(scope.url)
          .success(function(data, status, headers, config) {
            scope.successCallback({data: data});
            scope.loading = false;
          })
          .error(function(data, status, headers, config) {
            scope.error = true;
            scope.loading = false;
          });
      });
    }
  };
});

在这个示例代码中，我们自定义了一个名为“my-ajax”的指令，并使用了4个属性：url、loadingText、errorText和successCallback，分别表示请求的URL、加载时的提示信息、错误时的提示信息和请求成功后执行的回调函数。

当使用这个指令时，它会根据指定的URL发送AJAX请求，并在请求过程中显示loadingText；当请求成功时，会执行successCallback函数，并把返回的数据传递给它；当请求失败时，则会显示errorText。

总结

使用AngularJS和AJAX结合使用，可以方便地实现客户端和服务器端之间的异步请求。通过本文的示例代码，读者可以更深入地了解AngularJS和AJAX的结合使用方法，为日后的前端开发提供参考。