使用angularjs的$http.post异步提交数据时,服务器接收不了的问题
2016-02-26 17:54
976 查看
一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型,
提交数据格式如下:
![](http://images2015.cnblogs.com/blog/469083/201602/469083-20160226173936318-665765017.png)
二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型,
请求头格式如下:
![](http://images2015.cnblogs.com/blog/469083/201602/469083-20160226174245005-2021171467.png)
直接代码块:
三,所以把angularjs默认的json类型定义为正常application/x-www-form-urlencoded类型,同时把提交的数据序列化
请求头如下:
![](http://images2015.cnblogs.com/blog/469083/201602/469083-20160226174844755-1380213093.png)
直接代码块:
主要是在angular.module()添加一个出来更改Content-type和序列化正常表单提交数据格式的函数,接着$http.post提交后的数据服务器就可正常获取。
提交数据格式如下:
![](http://images2015.cnblogs.com/blog/469083/201602/469083-20160226173936318-665765017.png)
二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型,
请求头格式如下:
![](http://images2015.cnblogs.com/blog/469083/201602/469083-20160226174245005-2021171467.png)
直接代码块:
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类型,同时把提交的数据序列化
请求头如下:
![](http://images2015.cnblogs.com/blog/469083/201602/469083-20160226174844755-1380213093.png)
直接代码块:
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提交后的数据服务器就可正常获取。
相关文章推荐
- HttpURLConnection post json传参
- C++实现HTTP上传
- OkHttp3源码分析
- 6.3 强大的网络请求第三方框架 Retrofit 的介绍和使用<未完待翻译>
- Android 网络--Volley+OkHttp+Https
- android 之TCP客户端编程
- HTTP GET 304
- 001_Http之客户端-服务端-servlet
- wrk 压力测试工具
- httpmodule初识
- 我对GraphChi的理解
- 高性能HTTP加速器Varnish-3.0.3搭建、配置及优化步骤
- 改变网络接口速度和协商方式miitool和ethtool
- 网络应用的架构风格
- 《计算机网络原理》之宏观理解
- android httpClient 支持HTTPS的访问方式
- 神经网络-损失函数
- HttpServletRequest Attribute 和 Parameter 的区别
- Android系统中HTTPS通信的实现
- Linux远程登录和网络配置练习题