使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

时间:2021-12-12 23:25:32

一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型,

提交数据格式如下:

使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型,

请求头格式如下:

使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

直接代码块:

         app.controller('payCtrl',function($scope,$http){
//保存邮箱地址
$scope.emailEditSave=function(e){
e=e || window.event;
preventSubmit(e);
var yes=confirm('是否确认更改或者添加邮箱地址?');
if(yes ==true){
$http.post('http://localhost/html/angular_post.php',{email:"liang@163.com",cEmail:"liang@163.com"})
.success(function(resp){
console.log(resp);
});
} };
})

三,所以把angularjs默认的json类型定义为正常application/x-www-form-urlencoded类型,同时把提交的数据序列化

请求头如下:

使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

直接代码块:

   var app=angular.module('payApp',[],function($httpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; /**
* The workhorse; converts an object to x-www-form-urlencoded serialization.
* @param {Object} obj
* @return {String}
*/
var param = function(obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i; for(name in obj) {
value = obj[name]; if(value instanceof Array) {
for(i=0; i<value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if(value instanceof Object) {
for(subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if(value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
} return query.length ? query.substr(0, query.length - 1) : query;
}; // Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function(data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}]; }); app.controller('payCtrl',function($scope,$http){
//保存邮箱地址
$scope.emailEditSave=function(e){
e=e || window.event;
preventSubmit(e);
var yes=confirm('是否确认更改或者添加邮箱地址?');
if(yes ==true){
$http.post('http://localhost/html/angular_post.php',{email:"liang@163.com",cEmail:"liang@163.com"})
.success(function(resp){
console.log(resp);
});
} };
}) //阻止默认提交
function preventSubmit(e){
if(document.all){
e.returnValue;
}else{
e.preventDefault();
}
}

主要是在angular.module()添加一个出来更改Content-type和序列化正常表单提交数据格式的函数,接着$http.post提交后的数据服务器就可正常获取。