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>