AngularJs中POST和GET方式的ajax请求

来源：互联网发布：sql语句类型编辑：程序博客网时间：2024/06/11 12:57

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>

0 0