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>