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的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
vuejs指令详解
Feb 07 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
多文件上传的例子
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
JS命名空间的另一种实现
2013/08/09 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
深入理解js promise chain
2016/05/05 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python判断数字是否是超级素数幂
2018/09/27 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
基于python实现百度翻译功能
2019/05/09 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
年会搞笑主持词串词
2014/03/24 职场文书
初三开学计划书
2014/04/27 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python