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 相关文章推荐
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
js onclick事件传参讲解
Nov 06 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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
php调用C代码的实现方法
2014/03/11 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
javascript下string.format函数补充
2010/08/24 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python调用C语言的实现
2019/07/26 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
EJB的基本架构
2016/09/22 面试题
教学实习自我评价
2014/01/28 职场文书
优秀党员获奖感言
2014/02/18 职场文书
党委班子剖析材料
2014/08/21 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2015年司法局工作总结
2015/05/22 职场文书
清明节随笔
2015/08/15 职场文书
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS