快速解决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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
Weex开发之地图篇的具体使用
Oct 16 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
Js组件的一些写法
2010/09/10 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python的id()函数介绍
2013/02/10 Python
Python列表的切片实例讲解
2019/08/20 Python
python如何求100以内的素数
2020/05/27 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
高性能装备提升营地:Kammok
2019/02/27 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
应届大学生自荐信
2013/12/05 职场文书
材料会计岗位职责
2014/03/06 职场文书
网站创业计划书
2014/04/30 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书