快速解决angularJS中用post方法时后台拿不到值的问题


Posted in Javascript onAugust 14, 2018

用angularJS中的$http服务碰到了一个问题:运用$http.post方法向后台传递数据时,后台的php页面获取不到data参数传过来的值。

不论是这种姿势:

$http.post( "1.php", { id: 1 }).success(function (data) {
  console.log(data);
  });

还是这种姿势:

$http({
 method: 'POST',
 url: '1.php',
 data: { id: 1 }
 }).success(function (data) {
 console.log(data);
 });

后台php中的$_POST或$_REQUEST都无法获取到data中的值:

<?php
 echo json_encode($_POST);
?>

输出为一个空数组。为了测试php本身是不是真的获取不到值,我就写了个表单测试下:

<form action="1.php" method="post">
 <input type="text" name="tid">
 <input type="submit" value="submit">
</form>

输出结果为:{"tid":"2"},也就是说表单里的值是可以获取的,但是用ajax发送的数据获取不了!

那么表单数据和ajax发送的post数据之间有什么差异呢?于是我悄悄瞄一眼请求头...

1.表单的请求头部:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,ja;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 5
Content-Type: application/x-www-form-urlencoded
Cookie: a0537_times=1
Host: 127.0.0.1
Origin: http://127.0.0.1
Pragma: no-cache
Referer: http://127.0.0.1/angularTest/1.html
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

2.ajax发送的数据的请求头部:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,ja;q=0.6
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 10
Content-Type: application/json;charset=UTF-8
Cookie: a0537_times=1
Host: 127.0.0.1
Origin: http://127.0.0.1
Pragma: no-cache
Referer: http://127.0.0.1/angularTest/1.html
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

问题一下子就出来了!表单发送的文本类型是表单类型,而angular的ajax默认发送的则是json数据。

那么怎么把Content-type给改了呢?于是我就打开了angular的官网,照着改一下请求头:

$http({
 method: 'POST',
 url: '1.php',
 data: { id : 1 }
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
 }
 }).success(function (data) {
 console.log(data);
 });

于是输出结果为:{"{\"test\":1}":""},还是有问题。对象并没有自动地序列化(jQuery用习惯了都快忘了居然还有这个问题!)

那么解决方案有:

1.不写成对象的形式,直接写字符串:

$http({
 method: 'POST',
 url: '1.php',
 data: 'test=1',
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
 }
 }).success(function (data) {
 console.log(data);
 });

2.重写angular中transformRequest,自己写一个转换方法:

$http({
 method: 'POST',
 url: '1.php',
 data: $scope.data,
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
 },
 transformRequest: function ( data ) {
  var str = '';
  for( var i in data ) {
  str += i + '=' + data[i] + '&';
  }
  return str.substring(0,str.length-1);
 }
 }).success(function (data) {
 console.log(data);
 });

3.重写angular中的transformRequest,简单粗暴地把jquery拿过来:

$http({
 method: 'POST',
 url: '1.php',
 data: $scope.data,
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
 },
 transformRequest: function ( data ) {
  return $.param(data);
 }
 }).success(function (data) {
 console.log(data);
 });

4.修改默认的transformations(这个不太熟,先看一眼官网上怎么说的):

Default Transformations

The $httpProvider provider and $http service expose defaults.transformRequest and defaults.transformResponse properties. If a request does not provide its own transformations then these will be applied.

You can augment or replace the default transformations by modifying these properties by adding to or replacing the array.

Angular provides the following default transformations:

Request transformations ($httpProvider.defaults.transformRequest and $http.defaults.transformRequest):

If the data property of the request configuration object contains an object, serialize it into JSON format.
Response transformations ($httpProvider.defaults.transformResponse and $http.defaults.transformResponse):

If XSRF prefix is detected, strip it (see Security Considerations section below).
If JSON response is detected, deserialize it using a JSON parser.

然后照抄:

app.config(['$httpProvider', function ( $httpProvider ) {
  $httpProvider.defaults.transformRequest = function ( data ) {
  var str = '';
  for( var i in data ) {
   str += i + '=' + data[i] + '&';
  }
  return str.substring(0,str.length-1);
  }
 }]);
<code class="language-javascript">$http({ 
 method: 'POST', 
 url: '1.php', 
 data: $scope.data, 
 headers: { 
  'Content-Type': 'application/x-www-form-urlencoded' 
 } 
 }).success(function (data) { 
 console.log(data); 
 });</code>

以上这篇快速解决angularJS中用post方法时后台拿不到值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之一
Jul 05 Javascript
javascript 跳转代码集合
Dec 03 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
laypage分页控件使用实例详解
May 19 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
详解angular应用容器化部署
Aug 14 #Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 #Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 #Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 #Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 #Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
linux下安装easy_install的方法
2013/02/10 Python
python操作CouchDB的方法
2014/10/08 Python
Python工厂函数用法实例分析
2018/05/14 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python修改列表值问题解决方案
2020/03/06 Python
python interpolate插值实例
2020/07/06 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
单位实习证明怎么写
2014/01/17 职场文书
工作时间上网检讨书
2014/02/03 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
大专学生求职信
2014/07/04 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript