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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
js实现自动锁屏功能
Jun 02 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脚本代码
2011/02/19 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python随机数分布random测试
2018/08/27 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
活动总结报告怎么写
2014/07/03 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
在职证明格式样本
2015/06/15 职场文书
职位证明模板
2015/06/23 职场文书
会议营销主持词
2015/07/03 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Vue监视数据的原理详解
2022/02/24 Vue.js