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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
Prototype框架详解
Nov 25 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
VUE中使用MUI方法
Feb 12 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 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 动态执行带有参数的类方法
2009/04/10 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
业务助理岗位职责
2013/11/18 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
个人工作主要事迹
2014/05/08 职场文书
兵马俑导游词
2015/02/02 职场文书
高三英语教学反思
2016/03/03 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS