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选中select控件 无法设置selected的解决方法
Sep 01 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JavaScript手风琴页面制作
May 17 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
使用layer弹窗,制作编辑User信息页面的方法
Sep 27 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
php处理斐波那契数列非递归方法
2012/02/04 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
任意位置显示html菜单
2007/02/01 Javascript
初探jquery——表单应用范例
2007/02/20 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
js消除图片小游戏代码
2019/12/11 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python在非root权限下的安装方法
2018/01/23 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python 处理文件的几种方式
2019/08/23 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
自考毕业自我鉴定
2014/03/18 职场文书
党员对照检查材料
2014/09/22 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
预备党员入党感想
2015/08/10 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript