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 相关文章推荐
DOM精简教程
Oct 03 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php实现zip文件解压操作
2015/11/03 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
深入理解node.js http模块
2018/01/24 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
python3多线程知识点总结
2019/09/26 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
房地产开盘策划方案
2014/02/10 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript