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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
jQuery异步提交表单实例
May 30 jQuery
详解jquery选择器的原理
Aug 01 jQuery
js如何编写简单的ajax方法库
Aug 02 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
单击按钮发送验证码,出现倒计时的简单实例
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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
js实现日历的简单算法
2017/01/24 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python发腾讯微博代码分享
2014/01/10 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
电钳工人个人求职信
2014/05/10 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
人力资源部岗位职责
2015/02/11 职场文书
销售员自我评价
2015/03/11 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
趣味运动会赞词
2015/07/22 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书