angularjs向后台传参,后台收不到数据
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向后台传参,后台收不到数据的更多相关文章
- axios post传参后台无法接收问题
起因是在angular项目中使用axios发送post请求,向后台传参后台一直无法接收,网上查了有说是请求头设置不对,需要把Content-Type:application/x-www-form-ur ...
- angular使用post、get向后台传参的问题
一.问题的来源 我们都知道向后台传参可以使用get.put,其形式就类似于name=jyy&id=001.但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的. ...
- Web jsp开发学习——前端后台传参方法
一.前端传后台: 1.1表单数据的传递 前端的表单里定义名字name 后台通过名字获取输入的值 1.2页面点击了哪个按钮传递 登录注销的另一种方式 点击登录的地方设置参数 ...
- AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
- angularJS 中的传参
今天总结一下 angularJS 传参的 3种方式:(配合 ui-router) 现在有两个页面,page1.html 和 page2.html, 现由 page1.html 向 page2.html ...
- angularjs $state.go 传参
在目标页面规定接受的参数:$stateProvider.state('page2', {params: {'data': null}}) 传参:$state.go('page2', {data: 'a ...
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
- IE浏览器GET传参后台乱码
ie里面 get传递的字符串 为 gb2312 ,后台用的是utf-8类型 所以用 POST传递字符串到后端 否则进行js参数转码 encodeURI(""); 后端解码
- angular的post传参后台php无法接收
很多时候我们需要用ajax提交post数据,angularjs与jq类似,也有封装好的post. 但是jQuery的post明显比angularjs的要简单一些,人性化一些. 两者看起来没什么区别,用 ...
随机推荐
- mysql apach php
一.MySql MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将 ...
- 初识javascript变量和基本数据类型
1.1首先,学习使用firebug控制台.设置一下firefox 中的配置选项,以便使控制台中的javascript警告更为严格...以方便我们更好的找出程序中不必要的bug. 1. 在火狐浏览器fi ...
- visual studio 2015中的webapi生成helpPage,页面不显示方法说明问题解决
环境: vs2015.win7 参考:http://www.cnblogs.com/Erik_Xu/p/5638381.html 生成的help页面如下:,并没有显示控制器和方法. 原因是:新建项目时 ...
- js实现弹框及自动关闭
<SCRIPT LANGUAGE="javascript"> < !-- window.open (''page.html'',''newwindow'',''h ...
- Android6.0动态权限申请
goggle在Android6.0要求部分权限需要动态申请,直接下载AndroidManifest.xml中无效 6.0权限的基本知识,以下是需要单独申请的权限,共分为9组, 每组只要有一个权限申请成 ...
- SVN合并代码
分之合并主干代码, 修改冲突后提交, 更新本地代码, 主干合并分之,
- 使用VelocityTracker来完成MotionEvent移动速率计算
先看效果图 关键代码(此处记录单点): switch (event.getAction()){ case MotionEvent.ACTION_DOWN: if (veloctiy==null) { ...
- 美化radio和checkbox样式
HTML部分 <div id="holder"> <div> <div class="tag">Checkbox Small ...
- js ie中实现拖拽
获取鼠标移动信息 开始我们需要获取鼠标的坐标.我们添加一个document.onmousemove 就可以达到此目的: Javascript: document.onmousemove = mou ...
- 【整理】Word OpenXML常用标签
一.背景 最近在做关于Word内容自动标引,需要了解Word的底层结构,顺便梳理一下OpenXML的标签含义,方便后续开发,提高对OpenXML标签的查找效率,也是一个熟悉的过程. 二.内容 < ...