您的位置：首页 > Web前端 > AngularJS

AngularJs中POST和GET方式的ajax请求

2016-12-29 15:06 204 查看

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" s
9280
rc="../static/js/ajax.js"></script>
22 <script type="text/javascript" src="../static/js/provider.js"></script>
23 </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航