使用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 ...
随机推荐
- POJ - 3280Cheapest Palindrome-经典区间DP
POJ - 3280 Cheapest Palindrome Time Limit: 2000MS Memory Limit: 65536KB 64bit IO Format: %I64d & ...
- 【撸码caffe 二】 blob.hpp
Blob类是caffe中对处理和传递的实际数据的封装,是caffe中基本的数据存储单元,包括前向传播中的图像数据,反向传播中的梯度数据以及网络层间的中间数据变量(包括权值,偏置等),训练模型的参数等等 ...
- curl ,post,get (原创)
curl get: 1)直接输出 $ch=curl_init(); curl_setopt($ch,CURLOPT_URL,"http://testopen.api.yaolan.com/a ...
- js判读周末以及节假日
两个链接,搞定! http://bbs.csdn.net/topics/10417668 http://www.jb51.net/article/131660.htm
- NOIP 2013 T2 火柴排队 ---->求逆序对
[NOIP2013T2]火柴排队 背景 noip2013day1 描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各 自 排成一列, 同一列火柴的高度互不相同, ...
- [转]Microsoft Solutions Framework (MSF) Overview
本文转自:http://msdn.microsoft.com/zh-CN/library/jj161047(v=vs.120).aspx [This documentation is for prev ...
- css中单位的使用
css中许多的属性都需要添加长度,而长度一般由数字和单位构成,如1px,1.5em,2vh:也可以省略单位,如line-height:1.5,表示行高为字体大小的1.5倍: 长度单位一般也分为相对长度 ...
- Django学习案例一(blog):一. 创建project、app
1.创建project 方法1:使用命令行创建项目.在E盘cmd执行如下命令: django-admin.py startproject myblog 方法2:使用pycharm创建项目.放置位置为D ...
- angular中的ng-click指令案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- redis BIO详解
BIO即background I/O service,后台I/O服务,是redis的aof持久化后台服务. redis把阻塞的同步I/O操作交给后台I/O服务来完成:close和fsync. clos ...