angularJS之$http:与服务器交互示例


Posted in Javascript onMarch 17, 2017

在angularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http。

  1. $http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互。
  2. $http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种method的请求,get、post、put、delete等。
  3. $http的各种方式的请求更趋近于rest风格。
  4. 在controller中可通过与$scope同样的方式获取$http对象,e.g. function controller($scope,$http){}

下面进行$http服务的使用说明,调用如下:

 

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

1.config为一个JSON对象,其中主要包含该请求的url、data、method等,如{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}}。

  1. method  {String} 请求方式e.g. "GET"."POST"
  2. url {String} 请求的URL地址
  3. params {key,value} 请求参数,将在URL上被拼接成?key=value
  4. data {key,value} 数据,将被放入请求内发送至服务器
  5. cache {boolean} 若为true,在http GET请求时采用默认的$http cache,否则使用$cacheFactory的实例
  6. timeout {number} 设置超时时间

2、success为请求成功后的回调函数,error为请求失败后的回调函数,这里主要是对返回的四个参数进行说明。

  1. data 响应体
  2. status 相应的状态值
  3. headers 获取getter的函数
  4. config 请求中的config对象,同上第1点   

为了方便大家与HTTP服务器进行交互,angularJS提供了各个请求方式下方法。

$http.put/post(url,data,config) url、name必填,config可选

$http.get/delete/jsonp/head(url,confid) url必填,config可选

url、data、config与$http的参数一致,

下面有一个simple demo用于展示如何使用$http()及$http.post()。

<!DOCTYPE HTML>
<html lang="zh-cn" >
<head>
  <meta charset="UTF-8">
  <title>CSSClasses</title>
  <script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function ctrl($http,$scope){
    $scope.login = function(user){
      $http.post("login.do",user).success(function(data, status, headers, config){
        alert("success");
      }).error(function(data, status, headers, config){
        alert("error");
      })
    }
    $scope.login1 = function(user){
      $http({url:"login.do",data:user}).success(function(data, status, headers, config){
        alert("success");
      }).error(function(data, status, headers, config){
        alert("error");
      })
    }
  }
</script>
</head>
<body ng-app>
  <div ng-controller="ctrl">
    <form name="loginFm">
      Name:<input ng-model="user.name" />
      pwd: <input ng-model="user.pwd" />
      <input type="button" value="login" ng-click="login(user)" />
      <input type="button" value="login1" ng-click="login1(user)" />
    </form>
  </div>

</body>
</html>

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

Javascript 相关文章推荐
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery的live使用注意事项
Feb 18 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 #Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 #Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 #Javascript
详解Vue.js入门环境搭建
Mar 17 #Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 #Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 #Javascript
基于bootstrap实现收缩导航条
Mar 17 #Javascript
You might like
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python生成九宫格图片
2018/11/19 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python日期时间Time模块实例详解
2019/04/15 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
css3的transition属性详解
2014/12/15 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
前厅收银主管岗位职责
2014/02/04 职场文书
高中运动会入场词
2014/02/14 职场文书
公司应聘自荐书
2014/06/14 职场文书
物理学专业求职信
2014/07/04 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
捐款感谢信
2015/01/20 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server