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 相关文章推荐
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
JS常用跨域方法实现原理解析
Dec 09 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获取中文拼音首字母类和函数分享
2014/04/24 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
深入理解python中的闭包和装饰器
2016/06/12 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python实现随机加减法生成器
2020/02/24 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
超市营业员岗位职责
2013/12/20 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
工作失误检讨书范文
2015/01/26 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python