• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS中$http服务常用的应用及参数

AngularJS中$http服务常用的应用及参数

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs http参数,angularjs http,angularjs http.post,angularjs http.get,angularjs http跨域等相关知识,希望在学习及工作中可以帮助到您

前言

$http 服务:只是简单封装了浏览器原生的XMLHttpRequest对象,接收一个参数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容,这个函数返回一个promise对象,具有success和error方法。

$http服务的使用场景:

var promise = $http({
method:"post",      // 可以是get,post,put, delete,head,jsonp;常使用的是get,post
url:"./data.json",     //请求路径
params:{'name':'lisa'}, //传递参数,字符串map或对象,转化成?name=lisa形式跟在请求路径后面
data:blob,         //通常在发送post请求时使用,发送二进制数据,用blob对象。
}).success(function(data){
//响应成功操作
}).error(function(data){
//响应失败(响应以错误状态返回)操作
})
</div>

then()函数:可以使用then()函数来处理$http服务的回调,then()函数接受两个可选的函数作为参数,表示success或error状态时的处理,也可以使用success和error回调代替: 

then(successFn, errFn, notifyFn) ,无论promise成功还是失败了,当结果可用之后, then都会立刻异步调用successFn或者errFn。这个方法始终用一个参数来调用回调函数:结果,或者是拒绝的理由。

在promise被执行或者拒绝之前, notifyFn回调可能会被调用0到多次,以提供过程状态的提示

promise.then(function(resp){
//响应成功时调用,resp是一个响应对象
}, function(resp) {
// 响应失败时调用,resp带有错误信息
});
</div>

then()函数接收的resp(响应对象)包含5个属性: 

      1. data(字符串或对象):响应体

      2. status:相应http的状态码,如200

      3. headers(函数):头信息的getter函数,可以接受一个参数,用来获取对应名字的值

      4. config(对象):生成原始请求的完整设置对象

      5. statusText:相应的http状态文本,如"ok" 

或者使用success/error方法,使用

//成功处理
promise.success(function(data, status, headers, config){
// 处理成功的响应
});
// 错误处理
promise.error(function(data, status, headers, config){
// 处理非成功的响应
});
</div>

  使用实例:

index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>$http request test </title>
 <script src="../js/angular.js"></script>
 <script src="app.js"></script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="myAppController" data-ng-init="loadData()">
 <table>
  <thead>
  <tr>
   <th>名称</th>
   <th>属性</th>
  </tr>
  </thead>
  <tbody>
  <tr data-ng-repeat="data in myData">
   <td>{{data.name}}</td>
   <td>{{data.attr}}</td>
  </tr>
  </tbody>
 </table>
</div>
</body>
</html>
 </div>

app.js

var myHttpApp = angular.module("myApp",[]);
myHttpApp.controller("myAppController",function($q,$http,$scope){
  var deffer = $q.defer();
  var data = new Blob([{
    "name":"zhangsan"
  }])
  $scope.loadData = function(){
    var promise = $http({
      method:"post",
      url:"./data.json",
      cache: true
    }).success(function(data){
      deffer.resolve(data);
    }).error(function(data){
      deffer.reject(data);
    })

    promise.then(function(data){
      $scope.myData = data.data;
    })
    /*promise.success(function(data){
      $scope.myData = data;
    })*/
  }
})
</div>

  data.json

[
 {"name":"zhangsan","attr":"China"},
 {"name":"lisa","attr":"USA"},
 {"name":"Bob","attr":"UK"},
 {"name":"Jecy","attr":"Jepan"}
]
</div>

  结果:

调用then()函数时返回的resp对象:

总结

AngularJS中$http服务常用的应用及参数到这就基本结束了,希望本文的内容能对大家学习使用AngularJS有所帮助。如果有疑问可以留言交流。

</div>

您可能想查找下面的文章:

  • AngularJS中$http服务常用的应用及参数

相关文章

  • 2017-05-30angularjs中的$eval方法详解
  • 2017-05-30AngularJS入门教程之更多模板详解
  • 2017-05-30AngularJs html compiler详解及示例代码
  • 2017-05-30AngularJS基础 ng-readonly 指令简单示例
  • 2017-05-30Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
  • 2017-05-30AngularJS基础 ng-mousemove 指令简单示例
  • 2017-05-30Angular路由简单学习
  • 2017-05-30AngularJS 依赖注入详解和简单实例
  • 2017-05-30Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
  • 2017-05-30AngularJS的表单使用详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 基于AngularJS+HTML+Groovy实现登录功能
    • Angular组件化管理实现方法分析
    • angularjs学习笔记之三大模块(modal,controller,view)
    • 实例解析angularjs的filter过滤器
    • Angular发布1.5正式版,专注于向Angular 2的过渡
    • Angular.Js之Scope作用域的学习教程
    • AngularJs实现ng1.3+表单验证
    • AngularJS通过ng-route实现基本的路由功能实例详解
    • AngularJS基础 ng-value 指令简单示例
    • 在JavaScript的AngularJS库中进行单元测试的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有