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

本文实例讲述了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参数中，我们可以获取服务器响应的内容將数据在视图中展示出来。

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

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

赞 (0)

相关推荐

  • AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法.分享给大家供大家参考,具体如下: AngularJS是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web服务器进行交互. 准备工作 1.下载angular js库. 官网下载地址:https://angularjs.org/ 或者点击此处本站下载. 2.开发环境准备,由于是和Tomcat服务器

  • Angular实现下载安装包的功能代码分享

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angular-实现下载安装包的功能</title> <script src="js/angular.min.js"></script> <sc

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • AngularJS 所有版本下载地址

    AngularJS 所有版本下载地址

    AngularJS官网本身采用AngularJS库构建,页面中的AngularJS库通过Google的CDN(内容分发网络)引入,所以国内访问会有问题. 大家可以从下面地址获取AngularJS所以版本: https://code.angularjs.org/ 各种版本应有尽有,上图为证: 补充说明:每个目录下有对应版本的压缩包,下载压缩包即可 更简单的方法:通过Npm包管理工具,或者Bower获取,请自行研究. 以上就是AngularJS 版本下载的资料,后续继续补充相关资料,谢谢大家对本站的

  • angularjs项目的页面跳转如何实现（5种方法）

    Angular页面传参有多种办法,根据不同用例,我举5种最常见的: PS: 在实际项目中,请参照https://github.com/johnpapa/angular-styleguide优化您的代码. 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数

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

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

    本文实例讲述了AngularJS与服务器Ajax交互操作.分享给大家供大家参考,具体如下: AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status

  • .NET2.0环境下的Ajax选型和应用（提供Demo源码下载）

    主题:.NET2.0环境下的Ajax选型和应用 研究需要解决的问题: 1 Ajax 应用框架的选型及其性能对比 2 如何应用 Ajax 3 应用 Ajax 过程中应该着重注意的问题 研究者: Jimmy.Ke 时间: 2006-11-13 一 Demo说明 Ajax Demo Web Site 是一个完整的 .NET Website ,其中包含 5 个 ASPX 页面及其对应的 CS 文件. 为了方便对比, Demo 中使用了三种 Ajax 应用方式: 一是使用微软提供的 Atlas 应用框架,

  • Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)

    本文实例讲述了Zend Framework入门之环境配置及第一个Hello World程序.分享给大家供大家参考,具体如下: 第一步:确认你的PHP环境: 1.请PHPer确认你的PHP版本是否在5.2.0以上..如果不是的话..请更新到5.2.0,否则.Zend Framework 好像用不了..我自己有试过. 遇到过这样的问题..所以请你们自己测试一下..PHP源码最新版下载地址为:http://www.php.net/downloads.php. 2.你的PHP环境配置好了之后,请打开ph

  • php+ajax实现带进度条的上传图片功能【附demo源码下载】

    php+ajax实现带进度条的上传图片功能【附demo源码下载】

    本文实例讲述了php+ajax实现带进度条的上传图片功能.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: <?php if(isset($_FILES["FileInput"]) && $_FILES["FileInput"]["error"]== UPLOAD_ERR_OK) { ############ Edit settings ############## $UploadDirectory = 'F:

  • PHP+Ajax实现无刷新分页实例详解(附demo源码下载)

    PHP+Ajax实现无刷新分页实例详解(附demo源码下载)

    本文实例讲述了PHP+Ajax实现无刷新分页的方法.分享给大家供大家参考,具体如下: 注:这里使用到的一些类库在前面文章都能找到源代码,因此为了缩短文章篇幅,都指明链接所在. 本文讲解内容为: Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/

  • PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

    PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

    本文实例讲述了PHP+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)

  • Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)

    本文实例讲述了Zend Framework教程之连接数据库并执行增删查的方法.分享给大家供大家参考,具体如下: 我们先要在数据库里建立一个叫message的表,它有三个字段.分别为id,title,content.其中id为主键. 现在我们开始第一步:在application文件夹下面加入一个config文件夹,并在这里面增加一个config.ini文件..这里面是配置数据库基本信息. 如下代码所示: [general] db.adapter=PDO_MYSQL //请开启PDO扩展 db.co

  • Laravel 5.1 on SAE环境开发教程【附项目demo源码】

    本文实例讲述了Laravel 5.1 on SAE环境开发方法.分享给大家供大家参考,具体如下: Laravel-简洁.优雅的PHP开发框架,为 WEB 艺术家创造的 PHP 框架,如今正式移植到SAE环境. 由于Laravel 5.1相比于Laravel 4有很多的改动,不仅以目录结构更加清晰,而且功能也更丰富.但是Laravel官方还是没有原生支持SAE环境(估计永远不会支持),所以我就做了一个移植版本,可以很优雅的切换本地和SAE环境. 由于SAE的特殊性,那么这几个核心问题就必须要解决

  • AngularJS实现与后台服务器进行交互的示例讲解

    AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler. angularJS中所有的请求都是通过js定义的Controler来完成的,也就是我们完全脱离了后台, 将整个应用程序的压力交给了客户端来完成.但是在实际开发的时候我们难免需要访问后台或者 与数据库进行交互,这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问. 在angularJS中提供了一种与远程Http服务器交互的服务,$http $http是angularJS中的

随机推荐