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、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
PHP分页详细讲解(有实例)
2013/10/30 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
python em算法的实现
2020/10/03 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
中专生自我鉴定
2013/12/17 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
跳蚤市场口号
2014/06/13 职场文书
购房个人委托书范本
2014/10/11 职场文书
求职推荐信范文
2015/03/27 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
golang正则之命名分组方式
2021/04/25 Golang
JavaScript实现简单拖拽效果
2021/09/15 Javascript