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设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
随机推荐
- Window和Linux文件共享
一.先设置window上的目录共享 1.1.右击文件要共享的文件夹,选择属性 1.2.设置要共享给的用户和设置用户操作权限 二.安装CIFS共享服务 sudo yum -y install cifs- ...
- 使用MockMvc进行springboot调试(SpringbootTest)
测试前关闭web项目.springboot启动程序WebApplication.class 笔者本地自定了端口SpringBootTest.WebEnvironment.DEFINED_PORT 代码 ...
- 页面被iframe与无刷新更换url方法
页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ if ...
- vs2012编译的程序不能在XP和2003下执行问题的解决方法
问题如题,通过无数次百度和谷歌后,发现,微软已经确认这是一个缺陷,安装Vs2012的update 3的升级包就可以解决问题.同时,在分发包的地方,vcredist_x86.exe 随程序分发一份就可以 ...
- 【Leetcode_easy】665. Non-decreasing Array
problem 665. Non-decreasing Array 题意:是否能够将数组转换为非减数组. solution: 难点在于理解如何对需要修改的元素进行赋值: class Solution ...
- Python之汉诺塔递归运算
汉诺塔问题是一个经典的问题.汉诺塔(Hanoi Tower),又称河内塔,源于印度一个古老传说.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆 ...
- 第六章 Realm及相关对象——《跟我学Shiro》
转发地址:https://www.iteye.com/blog/jinnianshilongnian-2022468 目录贴:跟我学Shiro目录贴 6.1 Realm [2.5 Realm]及[3. ...
- （一）Asp.net web api中的坑-【找不到与请求 URI匹配的 HTTP 资源】
在.net下,创建一个HTTP服务,有很多方案,比较老ashx,一般处理程序(HttpHandler), Web Service SOAP协议的,数据格式是XML,HTTP协议 WCF ...
- Flutter状态管理Provider，简单上手
在之前的文章中介绍了 Google 官方仓库下的一个状态管理 Provide.乍一看这俩玩意可能很容易就被认为是同一个东西,仔细一看,这不就差了一个字吗,有什么区别呢. 首先,你要知道的最大的一个区别 ...
- URL锚点HTML定位技术机制、应用与问题
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3591 一.锚点是什么 ...