angularJS 发起$http.post和$http.get请求的实现方法

 更新时间:2017年05月18日 17:05:53   作者:xiaoxiang-chen  
本篇文章主要介绍了angularJS 发起$http.post和$http.get请求的实现方法,分别介绍了$http.post和$http.get请求的方法,有兴趣的可以了解一下

AngularJS发起$http.post请求

代码如下:

$http({ 
  method:'post', 
  url:'post.php', 
  data:{name:"aaa",id:1,age:20} 
}).success(function(req){ 
  console.log(req); 
}) 

这时候你会发现收不到返回的数据,结果为null,这是因为要转换成form data。

解决方案:

配置$httpProvider:

var myApp = angular.module('app',[]); 
 myApp.config(function($httpProvider){ 

  $httpProvider.defaults.transformRequest = function(obj){ 
   var str = []; 
   for(var p in obj){ 
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
   } 
   return str.join("&"); 
  } 

  $httpProvider.defaults.headers.post = { 
    'Content-Type': 'application/x-www-form-urlencoded' 
  } 

}); 

或者在post中配置:

$http({ 
  method:'post', 
  url:'post.php', 
  data:{name:"aaa",id:1,age:20}, 
  headers:{'Content-Type': 'application/x-www-form-urlencoded'}, 
  transformRequest: function(obj) { 
   var str = []; 
   for(var p in obj){ 
    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
   } 
   return str.join("&"); 
  } 
}).success(function(req){ 
    console.log(req); 
}) 

AngularJS发起$http.post请求

代码如下:

  app.controller('sprintCtrl', function($scope, $http) {
      $http.get("http://localhost:8080/aosapp/pt/service?formid=pt_aosapp_service_sprintlist&teamid=1")
      .success(function (response) {console.log($scope.sprintlist=response);});
    });

其实,angularjs 和 jquery js最大的区别在哪儿那,angularjs是你事先在心中构建好真个页面,然后用变量或者占位符来表示数据,数据来了,直接填充就可以了;而jquery则是动态的修改dom元素,如添加修改dom标签等。设计思想不一样。

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

相关文章

  • 详谈angularjs中路由页面强制更新的问题

    详谈angularjs中路由页面强制更新的问题

    下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 由浅入深剖析Angular表单验证

    由浅入深剖析Angular表单验证

    这篇文章主要介绍了由浅入深剖析Angular表单验证 的相关资料,需要的朋友可以参考下
    2016-07-07
  • AngularJS 中的数据源的循环输出

    AngularJS 中的数据源的循环输出

    这篇文章主要介绍了AngularJS 中的数据源的循环输出的相关资料,希望通过本文能帮助到大家,实现这样的功能,需要的朋友可以参考下
    2017-10-10
  • 详解在Angular项目中添加插件ng-bootstrap

    详解在Angular项目中添加插件ng-bootstrap

    这篇文章主要介绍了详解在 Angular 项目中添加插件 ng-bootstrap,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • angularjs自定义过滤器demo示例

    angularjs自定义过滤器demo示例

    这篇文章主要介绍了angularjs自定义过滤器,结合完整实例形式分析了angularjs自定义过滤器相关原理、使用方法及操作注意事项,需要的朋友可以参考下
    2019-08-08
  • 使用yeoman构建angular应用的方法

    使用yeoman构建angular应用的方法

    下面小编就为大家带来一篇使用yeoman构建angular应用的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 简介AngularJS的视图功能应用

    简介AngularJS的视图功能应用

    这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用,以及 $routeProvider 需要的朋友可以参考下
    2015-06-06
  • angular.js指令中transclude选项及ng-transclude指令详解

    angular.js指令中transclude选项及ng-transclude指令详解

    这篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude选项的相关资料,文中介绍的非常详细,并给出了完整的示例代码大家参考学习,需要的朋友们下面来一起看看吧。
    2017-05-05
  • angula中使用iframe点击后不执行变更检测的问题

    angula中使用iframe点击后不执行变更检测的问题

    这篇文章主要介绍了angula中使用iframe点击后不执行变更检测问题,本文给大家分享解决方案,通过实例代码给的大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 详解AngularJS跨页面传值(ui-router)

    详解AngularJS跨页面传值(ui-router)

    本篇文章主要介绍了详解AngularJS跨页面传值(ui-router),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论