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 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
发现的以前不知道的函数
2006/09/19 Javascript
JavaScript使用cookie
2007/02/02 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
纯JS实现轮播图
2017/02/22 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
scrapy爬虫实例分享
2017/12/28 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Pytorch to(device)用法
2020/01/08 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
大专生简历的自我评价
2013/11/26 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python