快速解决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 相关文章推荐
取得传值的函数
Oct 27 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
音乐器材管理制度
2014/01/31 职场文书
元旦联欢会感言
2014/03/04 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
同学聚会通知书
2015/04/20 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL