一、问题的来源

我们都知道向后台传参可以使用get、put,其形式就类似于name=jyy&id=001。但是在ng中我却发现使用$http post进行异步传输的过程中后台是接收不到数据的。其实这个问题是因为请求头的缘故。在ng中默认的请求头是:“Content-Type":"application/json",也就是说传递参数是使用的就是json格式。但是后台默认的却是Content-Type': 'application/x-www-form-urlencoded'。因此在这样的情况下后台接收到的数据就会是空的。

那么为什么使用get形式就可以传参呢?在书中我发现这样的一句话:”这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化”,可以理解为在get中参数的传递是直接追加在url后面的,那么此时参数形式{"id":"1","name":"jyy"}会被转化成id=1&name=jyy追加在url后面。那么在后台中就可以直接获取到了。例如:

var app = angular.module('app',[]);
    app.controller('ctrl',function($scope,$q,$http){
      var defer = $q.defer();
      var promise = defer.promise;
      $http({
        method: "get",
        params:{id:1,name:jyy},
        url:"1.php"
      }).success(function(data){
        defer.resolve(data);
      });
      promise.then(function(data){
        $scope.data = data;
      })
    })

在后台(PHP)输入echo $_GET[id]就可以正常显示了。

那么接下来就研究怎么解决post的传值了。

二、问题的解决

1. 修改请求头

第一种方法就是在ng中修改请求头将json格式改成x-www-form-urlencoded。修改方法点击即可查看。

值得注意的是,在使用第二种方法时,可以修改put,get,post,common的传参格式。因此修改哪种方式,就只能使用这种方式才能在后台得到参数。这篇博文写到使用common进行设置可以同时使用put、get、post进行传参。但是在我的实际操作中发现对common进行修改并不能使用post进行传参,而只有设置了post的请求头才可以。

另外由于在ng中的参数都是使用json格式表达,因此需要引入jquery,使用其$.param("参数列表的json格式")进行序列化表示。

首先使用修改post请求头。具体代码如下:

var app = angular.module('app');
  
    app.config(function($httpProvider){
      $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
    app.controller('ctrl',function($scope,$resource,$q,$http){
      var defer = $q.defer();
      var promise = defer.promise;
      $http({
        method: "post",
        data:$.param({"id":"1","name":"jyy"}),
        url:"1.php"
      }).success(function(data){
        defer.resolve(data);
      });
      promise.then(function(data){
        $scope.data = data;
      })
    })

此时在后台中(使用的是php),输入echo $_POST[id],就会显示。而debug其中显示的请求头正是我们设置的。

2.在后台进行解决

由于使用的是php,所以暂时用php的方法解决。在这个方法中,我们不修改请求头。因为get传值是正常的,那么,只要能够得到post的值就好。既然ng向后台传值了,即便是因为请求头不同,但是总会传过来什么的吧,既然能够传过来,就先获取它。这个时候使用$GLOBALS['HTTP_RAW_POST_DATA']将这个传过来的东西显示出来。那么这个$GLOBALS['HTTP_RAW_POST_DATA']是什么呢?在网上查询得知$HTTP_RAW_POST_DATA 变量包含有原始的 POST 数据。此变量仅在碰到未识别 MIME 类型的数据时产生,PHP不能识别的Content-Type类型的时候,会将http请求包中相应的数据填入变量$HTTP_RAW_POST_DATA。就是说现在这个请求头虽然是有冲突的,但是却能够显示出来。如下:

var app = angular.module('app',[]);
    app.controller('ctrl',function($scope,$q,$http){
      var defer = $q.defer();
      var promise = defer.promise;
      $http({
        method: "post",
        data:{'id':'1','name':'jyy'},
        url:"1.php"
      }).success(function(data){
        defer.resolve(data);
      });
      promise.then(function(data){
        $scope.data = data;
      })
    })

php代码:

echo $GLOBALS['HTTP_RAW_POST_DATA'];

此时显示出来的东西是:{"id":"1","name":"jyy"}。发现这个结果是正确显示了。那么直接对齐进行操作不就可以了?好吧,那就先看看是什么类型:使用gettype()得到的是string,就是说他是个json字符串。那就使用json_decode()转换,发现会报错。好吧,放弃使用这个方法。

但是此时还有另外的方法。使用file_get_contents("php://input"),这个方法中 php://input 是个可以访问请求的原始数据的只读流。 POST 请求的情况下,最好使用 php://input 来代替 $HTTP_RAW_POST_DATA,因为它不依赖于特定的 php.ini 指令。 此时这个方法就可以返回传过来的参数了。代码如下:

$a = json_decode(file_get_contents("php://input"));
  echo $a->id;

结果输出正确的id。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持Devmax

angular使用post、get向后台传参的问题实例的更多相关文章

  1. ios – 将视频分享到Facebook

    我正在编写一个简单的测试应用程序,用于将视频从iOS上传到Facebook.由于FacebookSDK的所有文档都在Objective-C中,因此我发现很难在线找到有关如何使用Swift执行此操作的示例/教程.到目前为止我有这个在我的UI上放置一个共享按钮,但它看起来已禁用,从我读到的这是因为没有内容设置,但我看不出这是怎么可能的.我的getVideoURL()函数返回一个NSURL,它肯定包含视

  2. ios – 错误域= NSURLErrorDomain代码= -1003“找不到具有指定主机名的服务器

    当我尝试在设备上运行应用程序时出现此错误.当我在模拟器上运行它并且post请求正常工作时,我没有收到此错误.这是我的代码片段:任何帮助表示赞赏.谢谢解决方法此错误通常会提示DNS相关问题.检查设备上的DNS设置并确认您可以使用Safari或其他浏览器浏览互联网.如果有一个url,你可以在同一台服务器上获取,尝试直接在设备上的Safari中访问它.

  3. ios – Xcode Bot:如何在post触发器脚本上获得.ipa路径?

    我正在使用机器人来存档iOS应用程序,我需要获取.ipa产品路径才能将其发布到我们的分发系统中.机器人设置:并使用脚本打印所有env变量,其中不包含ipa文件的路径.此外,一些变量指向不存在的目录,即:XCS_OUTPUT_DIR这里的env变量输出:除此之外,我还能够确认.ipa文件是在另一个文件夹中创建的(/IntegrationAssets//

  4. ios – 使用CocoaPods post install hook将自定义路径添加到HEADER_SEARCH_PATHS

    解决方法在Podfile中定义一个方法:然后在post_install中调用该方法:

  5. iOS7 Safari中的全屏模式

    我正在使用SenchaTouch开发移动网站.在iOS7Safari中,我无法创建顶级地址栏和下面的工具栏消失了.Sencha过去常常处理iOS6,但iOS7最近的一些变化导致了这个问题.http://java.dzone.com/articles/safari-ios-7-and-html5我阅读了上面的链接&对于HTML5游戏而言,这似乎也是一个问题.一些其他应用程序.适用于iOS6的旧win

  6. ios – 如何使用新的Apple Swift语言发布JSON

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  7. ios – POST请求使用application / x-www-form-urlencoded

    后端开发人员在POST请求中给出了这些说明:>路线:{url}/{app_name/{controller}/{action}控制器和动作应该是小帽子.>API测试链接:http:****************>请求应该使用POST方法.>参数应通过请求内容体(FormUrlEncodedContent)传递.>参数应该是json格式.>参数是关键的.在协议中没有经验5,我搜索并结束了我的代码.

  8. 从iOS应用程序发送帖子到PHP脚本不工作…简单的解决方案就像

    我之前已经做了好几次了但是由于某些原因我无法通过这个帖子…我尝试了设置为_POST且没有的变量的PHP脚本……当它们未设置为发布时它工作精细.这是我的iOS代码:这里是PHP的一大块,POST变量不在正确的位置?我想这对于更有经验的开发人员来说是一个相当简单的答案,感谢您的帮助!解决方法$_POST是一个数组,而不是一个函数.您需要使用方括号来访问数组索引:

  9. ios – 在HTTPBody中设置NSDictionary并使用POST方法发送

    我想用POST方法调用Web服务.我需要发布一个带有URL的字典.我的Web服务参数如下:以下是我的要求:但是我收到以下错误:服务器拒绝此请求,因为请求实体的格式不受所请求方法所请求资源的支持解决方法请找到以下代码,将数据发布到Web服务.请注意这是我在我的一个申请中使用的样本.希望这可以帮助.从您的评论“服务器拒绝此请求”服务器是否支持JSON或XML格式.

  10. ios – 如何使用Firebase存储喜欢的内容

    我有一个关于firebase的后端,有像Facebook这样的帖子.所以我需要喜欢这些帖子的功能.问题是如何存储喜欢帖子的喜欢和用户?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部