一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型,
提交数据格式如下:
二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型,
请求头格式如下:
直接代码块:
1 app.controller(‘payCtrl‘,function($scope,$http){ 2 //保存邮箱地址 3 $scope.emailEditSave=function(e){ 4 e=e || window.event; 5 preventSubmit(e); 6 var yes=confirm(‘是否确认更改或者添加邮箱地址?‘); 7 if(yes ==true){ 8 $http.post(‘http://localhost/html/angular_post.php‘,{email:"[email protected]",cEmail:"[email protected]"}) 9 .success(function(resp){ 10 console.log(resp); 11 }); 12 } 13 14 }; 15 })
三,所以把angularjs默认的json类型定义为正常application/x-www-form-urlencoded类型,同时把提交的数据序列化
请求头如下:
直接代码块:
1 var app=angular.module(‘payApp‘,[],function($httpProvider) { 2 // Use x-www-form-urlencoded Content-Type 3 $httpProvider.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=utf-8‘; 4 5 /** 6 * The workhorse; converts an object to x-www-form-urlencoded serialization. 7 * @param {Object} obj 8 * @return {String} 9 */ 10 var param = function(obj) { 11 var query = ‘‘, name, value, fullSubName, subName, subValue, innerObj, i; 12 13 for(name in obj) { 14 value = obj[name]; 15 16 if(value instanceof Array) { 17 for(i=0; i<value.length; ++i) { 18 subValue = value[i]; 19 fullSubName = name + ‘[‘ + i + ‘]‘; 20 innerObj = {}; 21 innerObj[fullSubName] = subValue; 22 query += param(innerObj) + ‘&‘; 23 } 24 } 25 else if(value instanceof Object) { 26 for(subName in value) { 27 subValue = value[subName]; 28 fullSubName = name + ‘[‘ + subName + ‘]‘; 29 innerObj = {}; 30 innerObj[fullSubName] = subValue; 31 query += param(innerObj) + ‘&‘; 32 } 33 } 34 else if(value !== undefined && value !== null) 35 query += encodeURIComponent(name) + ‘=‘ + encodeURIComponent(value) + ‘&‘; 36 } 37 38 return query.length ? query.substr(0, query.length - 1) : query; 39 }; 40 41 // Override $http service‘s default transformRequest 42 $httpProvider.defaults.transformRequest = [function(data) { 43 return angular.isObject(data) && String(data) !== ‘[object File]‘ ? param(data) : data; 44 }]; 45 46 }); 47 48 app.controller(‘payCtrl‘,function($scope,$http){ 49 //保存邮箱地址 50 $scope.emailEditSave=function(e){ 51 e=e || window.event; 52 preventSubmit(e); 53 var yes=confirm(‘是否确认更改或者添加邮箱地址?‘); 54 if(yes ==true){ 55 $http.post(‘http://localhost/html/angular_post.php‘,{email:"[email protected]",cEmail:"[email protected]"}) 56 .success(function(resp){ 57 console.log(resp); 58 }); 59 } 60 61 }; 62 }) 63 64 //阻止默认提交 65 function preventSubmit(e){ 66 if(document.all){ 67 e.returnValue; 68 }else{ 69 e.preventDefault(); 70 } 71 }
主要是在angular.module()添加一个出来更改Content-type和序列化正常表单提交数据格式的函数,接着$http.post提交后的数据服务器就可正常获取。
时间: 2024-10-04 21:33:43