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>
{
"name"
:
"Rongbo_J"
,
"age"
:
"23"
}
AngularJS入门教程之与服务器(Ajax)交互操作示例的更多相关文章
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- AngularJS入门教程:日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
- Angular系列----AngularJS入门教程00:引导程序(转载)
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- AngularJS 入门教程 $http is not defined 解决方案
采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...
- [转载]AngularJS入门教程00:引导程序
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Redis入门教程(三)— Java中操作Redis
在Redis的官网上,我们可以看到Redis的Java客户端众多 其中,Jedis是Redis官方推荐,也是使用用户最多的Java客户端. 开始前的准备 使用jedis使用到的jedis-2.1.0. ...
- Redis入门教程:特性及数据类型的操作
虽然Redis已经很火了,相信还是有很多同学对Redis只是有所听闻或者了解并不全面,下面是一个比较系统的Redis介绍,对Redis的特性及各种数据类型及操作进行了介绍.是一个很不错的Redis入门 ...
- MongoDB最简单的入门教程之四:使用Spring Boot操作MongoDB
Spring Boot 是一个轻量级框架,可以完成基于 Spring 的应用程序的大部分配置工作.Spring Boot的目的是提供一组工具,以便快速构建容易配置的Spring应用程序,省去大量传统S ...
- Angular系列------AngularJS入门教程:导言和准备(转载)
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_13-用户退出-前端
调试前端的退出 logout方法 找到路由 退出对应的组件页面 这就是退出的组件 退出的方法 把这两个js的引用,从上面复制到下面引用.因为可能存在js的冲突问题. 资料里面给了一个前端 整个覆盖当前 ...
- 123457123456#0#-----com.threeapp.SuanShuXiaoTianCai01----数学算术小天才
com.threeapp.SuanShuXiaoTianCai01----数学算术小天才
- vs2015配置link.exe环境变量
https://www.cnblogs.com/johnwii/p/4966086.html
- 【Leetcode_easy】686. Repeated String Match
problem 686. Repeated String Match solution1: 使用string类的find函数: class Solution { public: int repeate ...
- Matlab批量获取子文件夹与文件名
批量得到父文件夹下所有子文件夹的路径的MATLAB函数. function [SubFolders] = GetFolders(ParentFolder) %GetFolders % 函数功能为获取父 ...
- 【数据库开发】如何创建MySQL数据库连接池(一个基于libmysql的MySQL数据库连接池示例(C/C++版))
http://blog.csdn.net/horace20/article/details/8087557 1. 一般架构说明 图 1 架构层次图 一般应用系统数据库访问模块可大致分为两层,一层 ...
- 基于MSP430F2618的程控电压源
基于MSP430F2618的程控电压源 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 系列博客说明:此系列博客属于作者在大三大四阶段所储备的关于电子电路设计 ...
- C#6.0和C#7.0
C#最新功能(6.0.7.0) 一直用C#开发程序,.NET的功能越来越多,变化也挺大的,从最初的封闭,到现在的开源,功能不断的增加,一直在进步.作为C#的强烈支持者,C#的变化,我不能不关注,这篇文 ...
- sql server 2008 数据库管理系统使用SQL语句创建登录用户步骤详解
介绍了sql server 2008 数据库管理系统使用SQL语句创建登录用户步骤详解 --服务器角色: --固定服务器角色具有一组固定的权限,并且适用于整个服务器范围. 它们专门用于管理 SQL S ...
- Redis 常用命令学四:集合类型命令
1.增加和删除命令 127.0.0.1:6379> SADD st a (integer) 1 127.0.0.1:6379> SADD st r f g (integer) 3 127. ...