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变量声明详解
Nov 27 Javascript
JavaScript数组常用方法
Mar 02 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 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
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
Python卸载模块的方法汇总
2016/06/07 Python
Python算法应用实战之栈详解
2017/02/04 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python代码需要缩进吗
2020/07/01 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
保险经纪人求职信
2014/03/11 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
模范班主任事迹材料
2014/12/17 职场文书
求职自我评价怎么写
2015/03/09 职场文书
民事调解书范文
2015/05/20 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python