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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
vue-cli配置全局sass、less变量的方法
Jun 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检测网页是否被百度收录的示例分享
2014/01/31 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
html读出文本文件内容
2007/01/22 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Django之路由层的实现
2019/09/09 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
造价工程师个人求职信
2013/09/21 职场文书
智能电子应届生求职信
2013/11/10 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
领导班子整改措施
2014/10/24 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
公司感谢信范文
2015/01/22 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
校长新学期致辞
2015/07/30 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
python实现大文本文件分割成多个小文件
2021/04/20 Python
HAM-2000摩机图
2021/04/22 无线电
你知道Java Spring的两种事务吗
2022/03/16 Java/Android