angularJS 发起$http.post和$http.get请求

2018-02-09 12:42:22来源:oschina作者:雪山精灵人点击

分享
AngularJS发起$http.post请求

代码如下:


$http({
method:'post',
url:'post.php',
data:{name:"aaa",id:1,age:20}
}).success(function(req){
console.log(req);
})

这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data。 解决方案:

配置$httpProvider: var myApp = angular.module('app',[]);
myApp.config(function($httpProvider){
$httpProvider.defaults.transformRequest = function(obj){
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
$httpProvider.defaults.headers.post = {
'Content-Type': 'application/x-www-form-urlencoded'
}
});

angular.module("base", [])


.base.factory("$jsonToFormData",function() {function transformRequest( data, getHeaders ){ var headers = getHeaders(); headers["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8"; if(typeof( data )=="string"){return data; } return $.param(data);}return( transformRequest ); }).service('baseService', ['$http','$q','$jsonToFormData', function($http,$q,$jsonToFormData) {var service = { /*** get请求,输入url。* 调用方法:* var def=baseService.get(url);* def.then(*function(data){},*function(){});*/ get:function(url){var deferred = $q.defer();$http.get(url).success(function(data,status){deferred.resolve(data);}).error(function(data,status){ deferred.reject(status);});return deferred.promise; }, /*** 数据使用表单键值对的方式提交。* 在post数据时使用www-form-urlencoded方式提交。* 发送数据方式:* 1.构建键值对*var str="name=tony&age=19";* postForm(user,str);* 2.构建简单json对象* var obj={name:"tony",age:19};* postForm(user,obj);** 数据处理方式:* var obj=baseService.postForm(url,params);* obj.then(*//调用成功时处理,服务器返回状态为200时。*function(data){*},*//调用失败时处理,服务器返回状态 为400或500.* function(status){* });**/ postForm:function(url,param){var deferred = $q.defer();$http.post(url,param,{transformRequest:$jsonToFormData}).success(function(data,status){deferred.resolve(data);}).error(function(data,status){deferred.reject(status);});return deferred.promise; }, /*** 将数据直接post到指定的URL。* 服务端接收方法:* 1.复杂对象。* var obj={name:"zyg",age:"19",friends:[{name:"laoli",sex:"male"},{name:"tony",sex:"male"}]};* 使用:*public void demo1(HttpServletRequest request,


HttpServletResponse response,@RequestBody User user) throws IOException* 2.直接读取流的方式。*String str=FileUtil.inputStream2String(request.getInputStream()); * User user= JSONObject.parseObject(str, User.class);*/ post:function(url,param){var deferred = $q.defer();$http.post(url,param).success(function(data,status){deferred.resolve(data);}).error(function(data,status){deferred.reject(status);});return deferred.promise; } } return service; }])

或者在post中配置 $http({
method:'post',
url:'post.php',
data:{name:"aaa",id:1,age:20},
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
}).success(function(req){
console.log(req);
})
AngularJS发起$http.post请求

代码如下:


app.controller('sprintCtrl', function($scope, $http) {
$http.get("http://localhost:8080/aosapp/pt/service?formid=pt_aosapp_service_sprintlist&teamid=1")
.success(function (response) {console.log($scope.sprintlist=response);});
});

其实,angularjs 和 jquery js最大的区别在哪儿那,angularjs是你事先在心中构建好真个页面,然后用变量或者占位符来表示数据,数据来了,直接填充就可以了;而jquery则是动态的修改dom元素,如添加修改dom标签等。设计思想不一样。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台