使用angularjs的$http.post异步提交数据时,服务器接收不了的问题
一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型,
提交数据格式如下:

二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型,
请求头格式如下:

直接代码块:
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类型,同时把提交的数据序列化
请求头如下:

直接代码块:
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提交后的数据服务器就可正常获取。
使用angularjs的$http.post异步提交数据时,服务器接收不了的问题的更多相关文章
- ASP模拟POST请求异步提交数据的方法
这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限 ...
- jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
- Android -- 提交数据到服务器,Get Post方式, 异步Http框架提交
1. 发送请求到服务器有几种方式 (1)HttpURLConnection (2)Httpclient 同步框架 (3)AsyncHttpClient 异步框架 (https://github.com ...
- JQuery中使用FormData异步提交数据和提交文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
- POST提交数据时四种常见的数据格式
最近项目部署到新环境tomcat+mysql,想看看项目部署成功没有,就用soupui调对应接口开测试,soupui使用比较简单,给上接口地址,入参xml报文,把入参的media Type设置为app ...
- Android 采用HttpClient提交数据到服务器
在前几篇文章中<Android 采用get方式提交数据到服务器><Android 采用post方式提交数据到服务器>介绍了android的两种提交数据到服务器的方法 本文继续介 ...
- Android 采用post方式提交数据到服务器
接着上篇<Android 采用get方式提交数据到服务器>,本文来实现采用post方式提交数据到服务器 首先对比一下get方式和post方式: 修改布局: <LinearLayout ...
- Android 采用get方式提交数据到服务器
首先搭建模拟web 服务器,新建动态web项目,servlet代码如下: package com.wuyudong.web; import java.io.IOException; import ja ...
- curl提交数据时中文乱码
1.使用curl提交数据时中文乱码解决: <?php $testJSON=array('name'=>'中文字符串','value'=>'test'); foreach ( $tes ...
随机推荐
- phonegap(cordova) 自己定义插件代码篇(四)----读取本地图片
有时候确实知道本地图片地址,要获取到base64 /** * 获取本地图片,包括路径和压缩后的 base64 */ (function (cordova) { var define = cordov ...
- 如何将dmp文件导入到自己的oracle数据库中
1.首先,我们可以先建立自己的一个用户表空间,创建表空间的格式如下: create tablespace test(表空间的名字) datafile 'D:\oracle\product\10.2.0 ...
- h5-7 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- k8s Job、Cronjob 的使用
Job负责处理任务,即仅执行一次的任务,它保证批处理任务的一个或多个Pod成功结束.而CronJob则就是在Job上加上了时间调度. Job 我们用Job这个资源对象来创建一个任务,我们定一个Job来 ...
- NOIP2013 D1T3 货车运输
[NOIP2013T3]货车运输 背景 noip2013day1 描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重 量限制,简称限重.现在有 q 辆货 ...
- 更换WordPress编辑器为TinyMCE Advanced
WordPress自带的编辑器功能很少,连更换字体样式大小都不行,没关系WordPress的插件中心插件非常多 在插件中心搜索TinyMCE Advanced 安装启用 还没完 点击设置 里面有丰富的 ...
- 读书笔记6-浪潮之巅(part1)
浪潮之巅 ——对于一个人来讲,一生能够赶上一次科技革命的浪潮也就足够了 近一百多年来,总有一些公司很幸运地站在了技术革命的浪尖上.而一旦处在那个位置,就算只用随着潮流的发展而前行,也能安安稳稳地发展十 ...
- jquey中的事件绑定
三种方法: $(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(se ...
- MemCached总结一:Unbutu操作系统下memcached服务器安装和telnet方式连接memcache
1.在Unbutu上安装memcached服务器 sudo apt-get update sudo apt-get install memcached 2. 确认memcached是否安装 要确认me ...
- mysqldump+mydumper+xtrabackup备份原理流程
mysqldump备份原理 备份的基本流程如下: 1.调用FTWRL(flush tables with read lock),全局禁止读写 2.开启快照读,获取此时的快照(仅对innodb表起作用) ...