AngularJs轻松入门（九）与服务器交互
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参数中，我们可以获取服务器响应的内容將数据在视图中展示出来。
AngularJs轻松入门（九）与服务器交互的更多相关文章
- AngularJs轻松入门
AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...
- AngularJs轻松入门（六）表单校验
表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...
- AngularJs轻松入门（八）Cookies读写
虽然使用JavaScript创建和获取Cookie很简单,AngularJs还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookie ...
- AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
- AngularJs轻松入门（五）过滤器
在前面几节里我们已经接触过AngularJs的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下 ...
- AngularJs轻松入门（四）模块化
在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在 ...
- AngularJs轻松入门（三）MVC架构
MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...
- AngularJs轻松入门（二）数据绑定
数据绑定是AngularJs中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en& ...
- AngularJs轻松入门（一）创建第一个应用
AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...
随机推荐
- 轻松学习JavaScript十七：JavaScript的BOM学习(二)
JavaScript计时事件 通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法,我们 有能力作到在一个设定的时 ...
- 《UNIX环境高级编程》读书笔记之系统数据文件和信息（1）
1.UNIX系统口令文件包括了下图所看到的的各字段,这些字段包括在<pwd.h>中定义的passwd结构体中 POSIX定义了两个获取口令文件项的函数. 在给出用户登录名或用户ID后.这两 ...
- 好莱坞原则—Spring的IOC容器
IOC容器的概念,之前在学习SSH的时候,就有接触过.但那时候也仅仅是知道这么个概念,认为它非常难理解.事实上并非它难理解,而是我并没有停下来好好对它总结梳理过. IOC(Inversion of C ...
- bzoj3444: 最后的晚餐(并查集+组合数学)
3444: 最后的晚餐 题目:传送门 题解: 考虑有解的情况: 直接上并查集,同一个联通块里的人一定要坐在一起的.不难发现其实对于每个联通块最多就只有两种排列方式,那就直接把大于等于两个人的联通块先去 ...
- angular4（1）angular脚手架
angular2之后有了类似于vue-cli的脚手架工具,很方便的帮助我们搭建项目: 1.安装angular命令行工具:npm install @angular/cli -g 2.检测angular- ...
- Kettle的四大不同环境工具
不多说,直接上干货! kettle里有不同工具,分别用于ETL的不同阶段. 初学者,建议送Spoon开始.高手,是四大工具都会用. Sqoop: 图形界面工具,快速设计和维护复杂的ETL工作流.集成开 ...
- c# iTextSharp导出PDF
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Th ...
- JavaScript 基础 if switch 弹窗 运算符
脚本语言最重要的几个部分: 数据类型 运算符 控制语句 数组 方法(函数) 一.基础知识 关键字:系统定义 有意义的名字如 background link 等 标识符:自己定 比如class的名字a ...
- RGB与16进制色互转
点击进入新版 <前端在线工具站> CSS, JavaScript 压缩YUI compressor, JSPacker...HTML特殊符号对照表PNG,GIF,JPG... Base ...
- shell脚本执行的三种方式
(1) bash script_name 或 sh script_name 推荐使用此方法,script_name 不需要执行权限亦可执行. (2) path/script_name 或 ...