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


Posted in Javascript onMay 18, 2017

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标签等。设计思想不一样。

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

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
Javascript 面试题随笔
Mar 31 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 #Javascript
微信小程序中input标签详解及简单实例
May 18 #Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 #Javascript
JavaScript运动框架 多值运动(四)
May 18 #Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP实现多文件上传的方法
2015/07/08 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
JavaScript常用内置对象用法分析
2019/07/09 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
大学英语专业求职信
2014/06/21 职场文书
离职证明标准格式
2014/09/15 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
百年孤独读书笔记
2015/06/29 职场文书