AngularJS中$http使用的简单介绍

 更新时间:2017年03月17日 09:46:18   作者:EldonZhao  
在AngularJS中主要使用$http服务与远程http服务器交互,本篇文章主要介绍了AngularJS中$http使用的简单介绍,非常具有实用价值,需要的朋友可以参考下。

在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();
 });
};

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

相关文章

  • Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能

    Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能

    这篇文章主要介绍了Angularjs bootstrap table多选(全选)支持单击行选中实现编辑、删除功能,需要的朋友可以参考下
    2017-03-03
  • 浅谈angular2 组件的生命周期钩子

    浅谈angular2 组件的生命周期钩子

    本篇文章主要介绍了浅谈angular2 组件的生命周期钩子,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 解决angular双向绑定无效果,ng-model不能正常显示的问题

    解决angular双向绑定无效果,ng-model不能正常显示的问题

    今天小编就为大家分享一篇解决angular双向绑定无效果,ng-model不能正常显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular 作用域scope的具体使用

    Angular 作用域scope的具体使用

    本篇文章主要介绍了Angular 作用域的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

    指令是angular的核心功能之一,用好了事半功倍,监听ng-repeat执行状态仅仅是它功能的冰山一角吧。下面这篇文章主要介绍了Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法,需要的朋友可以参考下。
    2016-12-12
  • 高效利用Angular中内置服务$http、$location等

    高效利用Angular中内置服务$http、$location等

    这篇文章主要介绍了如何高效利用Angular中内置服务,大家知道的Angular内置服务有哪些,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 使用angularjs创建简单表格

    使用angularjs创建简单表格

    AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件,然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。下面我们来看看如何使用angularjs创建简单表格
    2016-01-01
  • Angular 路由route实例代码

    Angular 路由route实例代码

    下面小编就为大家带来一篇Angular 路由route实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Angular.js 4.x中表单Template-Driven Forms详解

    Angular.js 4.x中表单Template-Driven Forms详解

    Angular 4.x 中有两种表单,一种是Template-Driven Forms - 模板驱动式表单,另外一种是Reactive Forms - 响应式表单 ,下面这篇文章主要给大家介绍了Angular.js 4.x中表单Template-Driven Forms的相关资料,需要的朋友可以参考学习,下面来一起看看吧。
    2017-04-04
  • AngularJS中关于ng-class指令的几种实现方式详解

    AngularJS中关于ng-class指令的几种实现方式详解

    这篇文章给大家介绍了angularJS中ng-class指令的三种实现方式,其中包括通过数据的双向绑定、通过对象数组和通过key/value这三种方式,有需要的朋友们可以参考学习,下面来一起看看吧。
    2016-09-09

最新评论