AngularJs中POST和GET方式的ajax请求

浏览数：55 / 时间：2015年06月09日

angular中ajax请求的方法说明：
/*
 * _http:angularJs中的$http对象
 * _url:ajax请求的URL
 * _method:请求方式：POST或GET
 * _params:GET方式请求时传递的参数
 * _data:POST方式请求时传递的参数
 * _responseType:在请求中设置XMLHttpRequestResponseType属性,""（字符串，默认）,
 * "arraybuffer"(ArrayBuffer);"blob"（blob对象）；"document"（HTTP文档）"json"(从JSON对象解析而来的JSON字符串)；
 * "text"（字符串）；"moz-blob"（Firefox的接收进度事件）；"moz-chunked-text"(文本流);"moz-chunked-arraybuffer"（ArrayBuffer流）。
 * 这个参数表示的含义就是服务器给页面返回的数据格式
 * _successCallback:请求成功的回调函数
 * _failureCallback:请求失败的回调函数
 *
*/
function ajaxClass(_http,_url,_method,_params,_headers,_data,_responseType,_successCallback,_failureCallback){
    this.http = _http
    this.url = _url || "";
    this.method = _method || "GET";
    this.params = _params || "";
    this.headers = _headers || "";
    this.data = _data || "";
    this.responseType = _responseType || "json";
    this.successCallback = _successCallback || function(res){
    };
    this.failureCallback = _failureCallback || function(res){
    
    };
    this.requestData = function (){
        this.http({
        method:this.method,
        url:this.url,
        params:this.params,
        data:this.data,
        headers : this.headers,
        responseType : this.responseType
    }).then(this.successCallback, this.failureCallback);
    }
}

POST方式请求数据，并且传递表单数据的例子
var ajaxApp = angular.module(‘ajaxApp‘,[]);

ajaxApp.controller(‘addCtrl‘,function($scope,$http,$filter){
    var url = "a.json";
    var ajax = new ajaxClass($http,url,"POST");
    ajax.data = $.param({"username":"qqq","pwd":"bbb","code":"111"});                // 传递表单数据的时候要使用$.param不然服务器没法正常捕获到发送的数据
    ajax.headers = { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ };            // 千万记住要传递表单数据的时候设置请求头
    ajax.successCallback = function(res){
        var status = res.data.status;
        if (status == 0){
            $scope.gridOptions = res.data;
        }
        else {
            
        }
    };
    ajax.failureCallback = function(res){
    };
    ajax.requestData();

});

GET方式请求数据，并且传递参数的例子
var myApp = angular.module(‘myApp‘,[]);

myApp.controller(‘myCtrl‘,function($scope,$http){
    var url = "a.php";
    //var url = "a.php?limit=10"
    var ajax = new ajaxClass($http,url,"get");
    ajax.params = {"limit":11};                    // 表单方式传递数据或者可以使用在url后面加？limit=11这样的形式传递
    // get方式请求数据不需要设置表头header
    ajax.successCallback = function(res){
        var status = res.data.status;
        $scope.gridOptions = res.data;
        console.log("status = " + status);
        if (status == 0){
            $scope.gridOptions = res.data;
        }
        else {
            
        }
    };
    ajax.failureCallback = function(res){
    };
    ajax.requestData();

});

GET方式请求数据，不传递参数的例子
var myApp = angular.module(‘myApp‘,[]);

myApp.controller(‘myCtrl‘,function($scope,$http){
    var url = "a.json";
    var ajax = new ajaxClass($http,url,"get");
    // get方式请求数据不需要设置表头header
    ajax.successCallback = function(res){
        var status = res.data.status;
        $scope.gridOptions = res.data;
        console.log("status = " + status);
        if (status == 0){
            $scope.gridOptions = res.data;
        }
        else {
            
        }
    };
    ajax.failureCallback = function(res){
    };
    ajax.requestData();

});

 1 html页面需要导入的库如下：
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5     <title></title>
 6     <meta charset="UTF-8" />
 7 </head>
 8 <script type="text/javascript" src="../static/bower_components/jquery/dist/jquery.min.js"></script>
 9 <script type="text/javascript" src="../static/bower_components/angular/angular.min.js"></script>
10 <script type="text/javascript" src="../static/bower_components/ag-grid/website/dist/angularGrid-latest.js"></script>
11 <body ng-app="myApp" ng-controller="myCtrl">
12 <ul>
13     <!--ng-repeat可以循环显示gridOptions下面的数据-->
14     <!--<li ng-repeat="x in gridOptions.data">
15     {{ x.Name }}
16     </li>-->
17     <li>{{ gridOptions }} "+" {{ gridOptions.length}} </li>
18 </ul>
19 </body>
20 <!--由于我把上面的ajaxClass这个方法是单独放在ajax.js文件的，所以此处需要导入这个文件，provider.js就是创建控制器进行请求的部分-->
21 <script type="text/javascript" src="../static/js/ajax.js"></script>
22 <script type="text/javascript" src="../static/js/provider.js"></script>
23 </html>