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代码
Mar 10 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
微信小程序 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连接Oracle数据库
2006/10/09 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
一行代码告别document.getElementById
2012/06/01 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python机器学习之KNN分类算法
2018/08/29 Python
python实现三次样条插值
2018/12/17 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
四年级学生期末评语
2014/12/26 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
观看建国大业观后感
2015/06/01 职场文书
信仰观后感
2015/06/03 职场文书
对学校的意见和建议
2015/06/04 职场文书
工作一年自我鉴定
2019/06/20 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书