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 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 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中设置index.php文件为只读的方法
2013/02/06 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP中“=&gt;
2019/03/01 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
python IP地址转整数
2020/11/20 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
绘画专业自荐信范文
2014/02/23 职场文书
党员创先争优活动总结
2014/05/04 职场文书
青安岗事迹材料
2014/05/14 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫