angularjs中封装了一个$http服务,用来请求远程资源

参见:HTTP API

其中封装过的$http.post和$http.get使用起来比较方便

后台是php,用$_POST['name']接收,一直接收不到代码,甚是奇怪

查阅文章所知,原来angular的$http服务和jquery的不一样

原文:

By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.

大意:

jquery传输数据用的Content-Type是:x-www-form-urlencoded,类似url传参,而angularJS的Content-Type是 application/json,是使用JSON序列化传参,而PHP正好默认不会接收后者。

根据老外的提议,改服务端代码当然也可以,但是还是$_POST用的习惯,所以就将angular的传参方式改为jquery的方式,下面是代码,放在主module里就可以了

// Your app's root module...
angular.module('MyModule', [], 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;
}];
});

Done!

原文链接:Link

angularjs向后台传参,后台收不到数据的更多相关文章

  1. axios post传参后台无法接收问题

    起因是在angular项目中使用axios发送post请求,向后台传参后台一直无法接收,网上查了有说是请求头设置不对,需要把Content-Type:application/x-www-form-ur ...

  2. angular使用post、get向后台传参的问题

    一.问题的来源 我们都知道向后台传参可以使用get.put,其形式就类似于name=jyy&id=001.但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的. ...

  3. Web jsp开发学习——前端后台传参方法

    一.前端传后台: 1.1表单数据的传递   前端的表单里定义名字name   后台通过名字获取输入的值         1.2页面点击了哪个按钮传递 登录注销的另一种方式   点击登录的地方设置参数 ...

  4. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  5. angularJS 中的传参

    今天总结一下 angularJS 传参的 3种方式:(配合 ui-router) 现在有两个页面,page1.html 和 page2.html, 现由 page1.html 向 page2.html ...

  6. angularjs $state.go 传参

    在目标页面规定接受的参数:$stateProvider.state('page2', {params: {'data': null}}) 传参:$state.go('page2', {data: 'a ...

  7. Vue中 axios+QS 插件往后台传参

    之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...

  8. IE浏览器GET传参后台乱码

    ie里面 get传递的字符串 为 gb2312  ,后台用的是utf-8类型  所以用 POST传递字符串到后端 否则进行js参数转码 encodeURI(""); 后端解码

  9. angular的post传参后台php无法接收

    很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post. 但是jQuery的post明显比angularjs的要简单一些,人性化一些. 两者看起来没什么区别,用 ...

随机推荐

  1. mysql apach php

    一.MySql MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将 ...

  2. 初识javascript变量和基本数据类型

    1.1首先,学习使用firebug控制台.设置一下firefox 中的配置选项,以便使控制台中的javascript警告更为严格...以方便我们更好的找出程序中不必要的bug. 1. 在火狐浏览器fi ...

  3. visual studio 2015中的webapi生成helpPage,页面不显示方法说明问题解决

    环境: vs2015.win7 参考:http://www.cnblogs.com/Erik_Xu/p/5638381.html 生成的help页面如下:,并没有显示控制器和方法. 原因是:新建项目时 ...

  4. js实现弹框及自动关闭

    <SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...

  5. Android6.0动态权限申请

    goggle在Android6.0要求部分权限需要动态申请,直接下载AndroidManifest.xml中无效 6.0权限的基本知识,以下是需要单独申请的权限,共分为9组, 每组只要有一个权限申请成 ...

  6. SVN合并代码

    分之合并主干代码, 修改冲突后提交, 更新本地代码, 主干合并分之,

  7. 使用VelocityTracker来完成MotionEvent移动速率计算

    先看效果图 关键代码(此处记录单点): switch (event.getAction()){ case MotionEvent.ACTION_DOWN: if (veloctiy==null) { ...

  8. 美化radio和checkbox样式

    HTML部分 <div id="holder"> <div> <div class="tag">Checkbox Small ...

  9. js ie中实现拖拽

    获取鼠标移动信息 开始我们需要获取鼠标的坐标.我们添加一个document.onmousemove 就可以达到此目的: Javascript:   document.onmousemove = mou ...

  10. 【整理】Word OpenXML常用标签

    一.背景 最近在做关于Word内容自动标引,需要了解Word的底层结构,顺便梳理一下OpenXML的标签含义,方便后续开发,提高对OpenXML标签的查找效率,也是一个熟悉的过程. 二.内容 < ...