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 SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
一些不错的js函数ajax
Aug 20 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP新手上路(二)
2006/10/09 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
cf收人广告词大全
2014/03/14 职场文书
技术负责人任命书
2014/06/05 职场文书
政风行风整改方案
2014/10/25 职场文书
财务会计岗位职责
2015/02/03 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Python天气语音播报小助手
2021/09/25 Python