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标签等。设计思想不一样。