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 ...
随机推荐
- iOS UI01_UIView
// // AppDelegate.m // UI01_UIView // // Created by dllo on 15/7/29. // Copyright (c) 2015年 zhoz ...
- NOIP2017提高组模拟赛 10 （总结）
NOIP2017提高组模拟赛 10 (总结) 第一题 机密信息 FJ有个很奇怪的习惯,他把他所有的机密信息都存放在一个叫机密盘的磁盘分区里,然而这个机密盘中却没有一个文件,那他是怎么存放信息呢?聪明的 ...
- bzoj1022: [SHOI2008]小约翰的游戏John（博弈SG-nim游戏）
1022: [SHOI2008]小约翰的游戏John 题目:传送门 题目大意: 一道反nim游戏,即给出n堆石子,每次可以取完任意一堆或一堆中的若干个(至少取1),最后一个取的LOSE 题解: 一道 ...
- CAS算法
/** * CAS(Compare-And-Swap)算法保证了数据的原子性 * CAS算法是硬件对于并发操作共享数据的支持 * CAS包含了3个操作数: * 内存值 V 看成两步 读取内存值为1步 ...
- BZOJ 3166 set+可持久化trie树（OR 莫队）
思路: 1.找次大值 我们不妨设当前点是次大的 那这段区间为 左边第二个比它大的点的坐标+1 和右边第二个比它大的点的坐标-1 2.用可持久化trie树找异或最大值 也可以用莫队 //By Siriu ...
- 07:清泉-改（prime+堆）
时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 512000kB 描述 华北电力大学可以抽象为一张有n个点m条边的无向图. 现在所有的边都断了. 修复每条边都有个不同 ...
- （转载）Android：学习AIDL，这一篇文章就够了(上)
前言 在决定用这个标题之前甚是忐忑,主要是担心自己对AIDL的理解不够深入,到时候大家看了之后说——你这是什么玩意儿,就这么点东西就敢说够了?简直是坐井观天不知所谓——那样就很尴尬了.不过又转念一想, ...
- 路飞学城Python-Day3
Moudle 1 Chapter 1 #练习题# 1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型?"""编译型:编译类指在应用源程 ...
- HDU-3065 病毒侵袭持续中 字符串问题 AC自动机
题目链接:https://cn.vjudge.net/problem/HDU-3065 题意 跟上一道题是几乎一模一样,这次是统计关键词的出现次数 一个相当坑的地方,注意多组样例 思路 套模版 改in ...
- BZOJ3796 Mushroom追妹纸（二分答案+后缀数组+KMP）
求出一个串使得这个串是\(s1,s2\)的子串.串中不包含\(s3\). 如果没有这个\(s3\)就可以二分答案,然后height小于二分值分一组.看看每组里是不是出现过\(s1,s2\)的后缀.判断 ...