AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】


Posted in Javascript onNovember 02, 2016

本文实例讲述了AngularJS与服务器Ajax交互操作。分享给大家供大家参考,具体如下:

AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法。

用法如下:

$http({method:'post',url:'loginAction.do'
}).success(function(data,status,headers,config){
//正常响应回调
}).error(function(data,status,headers,config){
//错误响应回调
});

状态码在200-299之间,会认为响应是成功的,success方法会被调用,第一个参数data为服务器端返回的数据,status为响应状态码。后面两个参数不常用,这里不做介绍。有兴趣的朋友请参考AngularJs API文档。

除此之外$http服务提供了一些快捷方法,这些方法简化了复杂的配置,只需要提供URL即可。比如对于post请求我们可以写成下面这个样子:

$http.post("loginAction.do")
.success(function(data,status,headers,config){
//正常响应回调
}).error(function(data,status,headers,config){
//错误响应回调
});

下面来看一个案例:

<!DOCTYPE html>
<html ng-app="serverMod">
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial09</title>
</head>
<body ng-controller="ServerController" ng-init="init()">
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<button ng-click="getInfo()">请求</button>
</body>
<script>
 var serverMod = angular.module("serverMod",[]);
 serverMod.controller("ServerController",function($scope,$log,$http){
  $scope.init = function()
  {
   $log.info("init functionn");
  }
  $scope.getInfo = function()
  {
   $http.get("json/person.json").success(function(data,status){
    alert(status);
    $scope.name = data.name;
    $scope.age = data.age;
   });
  }
 });
</script>
</html>

点击”请求”按钮,我们通过$http服务以get方式向服务器请求数据,服务器响应数据格式通常为一段Json,这里我们用一个文本文件代替,person.json内容如下:

{"name":"Rongbo_J","age":"23"}

返回的数据会放在data参数中,我们可以获取服务器响应的内容?⑹?菰谑油贾姓故境隼础?/p>

AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】

完整demo实例代码点击此处本站下载

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
关于this和self的使用说明
Aug 01 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
js重写方法的简单实现
Jul 10 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 #Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 #Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 #Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 #Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 #Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 #Javascript
快速解决js中window.location.href不工作的问题
Nov 02 #Javascript
You might like
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PDO实现学生管理系统
2020/03/21 PHP
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript常用方法总结
2015/05/14 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python爬取抖音视频的实例分析
2021/01/19 Python
特步官方商城:Xtep
2017/03/21 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
实习协议书范本
2014/09/25 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
合同纠纷调解书
2015/05/20 职场文书
比较node.js和Deno
2021/04/27 Javascript
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技