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

一,在正常情况下,使用表单的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

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

jQuery选取所有复选框被选中的值并用Ajax异步提交数据

昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: 1 <body> 2 <div> 3 <input type=&quo

ASP.NET MVC 第三章 异步提交数据

好长时间都没写文章了本来不准备在写文章了,但是我又为什么今天发表文章咧,第一是为了我自己对技术的认识.第二是为了新手不知道怎么去学习MVC写次系列文章. 废话结束吧,接下来我们看看怎么异步实现提交数据到按钮.本章就是为了WebForm用惯了事件驱动.(此处注明下有很多自认为高手的连事件都不懂是什么,不说懂就算了,直接上MVC吧) 我们根据第二章的修改路由代码接着写,此处因为本人PC不在安装VS2010所以就直接用VS2013了,不在说明怎么创建MVC的示例了.这里我使用MVC4,后面会跟大家一起

ASP模拟POST请求异步提交数据的方法

这篇文章主要介绍了ASP模拟POST请求异步提交数据的方法,本文使用MSXML2.SERVERXMLHTTP.3.0实现POST请求,需要的朋友可以参考下 有时需要获取远程网站的某些信息,而服务器又限制了GET方式,只能通过POST数据提交,这个时候我们可以通过asp来实现模拟提交post数据,网上有挺多这样的例子的.下面的是我自己写的比较简洁易懂的函数. 首先,需要一个编码设置的函数,因为asp一般为gbk的,而标准的网站现在大都使用utf-8的.所以需要转换. 代码如下: function

Ajax.BeginForm的异步提交数据 简介

Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步的表单提交,这对于我们开发者来说是一个福音,我们不用再自己去用JQ代码了,直接用MVC自代的Ajax.BeginForm就可以很容易的完成一个异步的表单提交动作. Html.BeginForm的原型解释: 1 @using (Html.BeginForm()) {} //提交到当前页面 2 3 @u

JQuery中使用FormData异步提交数据和提交文件

web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的.异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处.我们这里使用JQuery中封装好的ajax函数,更加简便.下面列举几个使用ajax异步提交数据的方

Android提交数据到服务器的两种方式四种方法

Android应用开发中,会经常要提交数据到服务器和从服务器得到数据,本文主要是给出了利用http协议采用HttpClient方式向服务器提交数据的方法. /** * @author Dylan * 本类封装了Android中向web服务器提交数据的两种方式四种方法 */ public class SubmitDataByHttpClientAndOrdinaryWay { /** * 使用get请求以普通方式提交数据 * @param map 传递进来的数据,以map的形式进行了封装 * @p

Android 采用post方式提交数据到服务器

接着上篇<Android 采用get方式提交数据到服务器>,本文来实现采用post方式提交数据到服务器 首先对比一下get方式和post方式: 修改布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="m

Android 采用get方式提交数据到服务器

首先搭建模拟web 服务器,新建动态web项目,servlet代码如下: package com.wuyudong.web; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServlet

后台获取页面提交数据时,中文总是乱码

后台获取页面提交数据时,中文总是乱码,折腾了好久才发现是因为,把提交的数据放在了url后面才导致,中文乱码,通过查阅资料才找到解决方法: 页面提交方式: 后台获取形式: String replay = new String(request.getParameter("replay").getBytes("iso-8859-1"),"utf-8");