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 相关文章推荐
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
js实现菜单跳转效果
Dec 11 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
php5 mysql分页实例代码
2008/04/10 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
javascript 闭包详解
2015/02/15 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
顶撞领导检讨书
2014/01/29 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python如何利用traceback获取详细的异常信息
2021/06/05 Python
一级电子管军用接收机测评
2022/04/05 无线电