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 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
详解jQuery事件
Jan 13 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
Js跳出两级循环方法代码实例
Sep 22 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获得当前的脚本网址
2007/12/10 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python 换位密码算法的实例详解
2017/07/19 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
如何利用python 读取配置文件
2021/01/06 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
PHP面试题大全
2015/10/16 面试题
linux面试题参考答案(7)
2012/10/29 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
公交公司毕业生求职信
2014/02/15 职场文书
初中英语演讲稿
2014/04/29 职场文书
承诺书样本
2014/08/30 职场文书
工作表现证明
2015/06/15 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
java泛型通配符详解
2021/07/25 Java/Android
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android