AngularJS中$http使用的简单介绍


Posted in Javascript onMarch 17, 2017

在AngularJS中主要使用$http服务与远程http服务器交互,其作用类似于jquery中的$.ajax服务:

  1. $http是AngularJS的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互;
  2. 与$.ajax相同,支持多种method请求:get、post、put、delete等;
  3. controller中可通过与$scope同样的方式获取$http对象,形如:function controller($ http, $ scope){};

$http使用说明:

$http服务使用如下面代码所示:

// 1.5以下版本
$http(config)
.success(function(data, status, headers, config){//请求成功执行代码})
.error(function(data, status, headers, config){//请求失败执行代码})

// 1.5以上版本
$http(config).then(
function successCallback(response){//请求成功执行代码},
function errorCallback(response){//请求失败执行代码}
);

具体参数、方法说明:

配置参数:

  1. config是请求的配置参数总集,格式为json;
  2. 包含的配置项包括:
  3. method:字符串类型,请求方式如"GET","POST","DELETE"等;
  4. url:字符串类型,请求的url地址;
  5. params:json类型,请求参数,将在url上被拼接成?key=value的形式;
  6. data:json类型,请求数据,将放在请求内发送至服务器;
  7. cache:bool类型,true表示http GET请求时采用默认的$http cache,否则使用$cacheFactory的实例;
  8. timeout:整数类型,超时时间;

回调函数:

  1. success是请求成功后的回调函数;
  2. error是请求失败后的回调函数;
  3. data是响应体;
  4. status是相应的状态值;
  5. headers是获取getter的函数;
  6. config是请求中的config json对象;

method属性可以作为config配置参数中的一个属性,也可以直接作为方法调用,如:

$http.post(url, data, config)

$http使用范例:

var searchOplog = function ($http, table, btn) {
 $http({
  url: 'data/oplog.json',
  method: 'GET'
 }).then(function successCallback(response) {
  console.log('get Oplog success:', response);
  table.init(response.data);
  btn.button('reset');
  btn.dequeue();
 }, function errorCallback(response) {
  console.log('errorCallback Response is:', response);
  table.init();
  btn.button('reset');
  btn.dequeue();
 });
};

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

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 #Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 #Javascript
Bootstrap表格制作代码
Mar 17 #Javascript
鼠标经过出现气泡框的简单实例
Mar 17 #Javascript
angularJS之$http:与服务器交互示例
Mar 17 #Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 #Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 #Javascript
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Django与JS交互的示例代码
2017/08/23 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
解读! Python在人工智能中的作用
2017/11/14 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python模拟表单提交登录图书馆
2018/04/27 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
数学系个人求职信范文
2014/01/30 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
小学运动会入场词
2015/07/18 职场文书
上班旷工检讨书
2015/08/15 职场文书
DSP接收机前端设想
2022/04/05 无线电