AngularJS1.X学习笔记12-Ajax
说到Ajax，你一定是思绪万千，想到XMLHttpRequest，$.ajax(),跨域，异步之类的。本文将探讨一下AngularJS的Ajax。
一、一个简单的例子
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>ajax1</title>
</head>
<body ng-controller="ajaxCtrl">
<button ng-click="getData()">获取数据</button>
<h1>{{data || "undown"}}</h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('ajaxCtrl',function($scope,$http){
$scope.getData = function(){
$http.get("data.1php")
.then(function(response){
$scope.data = response.data;
console.log(response);
},
function(error){
console.log(error);
} ) } })
</script>
</body>
</html>
说是一个简单的例子呢？为什么我搞了半天搞不好呢？我去调success方法和error方法，发现报错了。
原本以为是自己敲错了，有对着自由男人的例子敲，结果还是报错，有没有搞错啊，竟然说success不是一个方法。后来才是到原来它从1.6版开始去掉了success和error方法，哎呀啊呀，你去就去吧，干嘛不给我打个电话说声呢？！害得我搞半天。
不瞎扯了。正确的响应包含属性data，status，statusText，config，以及函数headers。出错时的响应为：咿，是一样的，不过data是一个html代码。
二、配置Ajax请求
| 配置项 | 作用 |
| data | 发送数据 |
| headers | 设置请求头部 |
| method | 请求方法 |
| params | 设置url |
| timeout | 设置超时时间 |
| transformRequest | 转换请求 |
| trransformResponse | 转换响应 |
| url | 配置请求路径 |
1、转换响应
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>ajax2</title>
</head>
<body ng-controller="ajaxCtrl">
<button ng-click="postData()">获取数据</button>
<h1>{{data || "undown"}}</h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp.controller('ajaxCtrl',function($scope,$http){
$scope.postData = function(){
var config = { transformResponse:function(data,headers){
return data+"大熊最帅！";
}
}
$http.get("data.php",config)
.then(function(response){
$scope.data = response.data;
console.log(response);
},
function(error){
console.log(error);
} ) } })
</script>
</body>
</html>
比如像上面这样配置，每个响应的数据都会包含一个真理：大熊最帅！。同样的道理我们也可以转换请求。
2、配置默认项
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>ajax3</title>
</head>
<body ng-controller="ajaxCtrl">
<button ng-click="postData()">获取数据</button>
<h1>{{data || "undown"}}</h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp
.config(function($httpProvider){
$httpProvider.defaults.transformResponse.push(function(data,headers){
return data+"大熊最帅！";
})
})
.controller('ajaxCtrl',function($scope,$http){
$scope.postData = function(){
$http.get("data.php")
.then(function(response){
$scope.data = response.data;
console.log(response);
},
function(error){
console.log(error);
} ) } })
</script>
</body>
</html>
这样配置transformResponse也是可以的，如此，整个模块的响应都会携带这个真理了。
默认配置项还有很多，自己看文档去。
3、拦截
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>ajax3</title>
</head>
<body ng-controller="ajaxCtrl">
<button ng-click="postData()">获取数据</button>
<h1>{{data || "undown"}}</h1> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp",[]);
myApp
.config(function($httpProvider){
$httpProvider.interceptors.push(function(){
return {
request:function(config){
console.log("request exec");
return config;
},
response:function(response){
console.log("response!")
response.data = response.data+"大熊最帅！";
return response;
}
}
})
})
.controller('ajaxCtrl',function($scope,$http){
$scope.postData = function(){
$http.get("data.php")
.then(function(response){
$scope.data = response.data;
console.log(response);
},
function(error){
console.log(error);
} ) } })
</script>
</body>
</html>
所谓拦截就是在请求发送之前和响应到来之前设置关卡，做一些处理，注意处理完后一定要放行，也就是说要有return，我已经上过当了。
可被拦截的状态还有，requestError：上一个请求拦截器抛出错误时调用，responseError上一个响应抛出错误时调用。
今天就学习到此，虽然还早！才1点多！关于promise可以参考我的另一篇文章： http://www.cnblogs.com/floor/p/6648045.htm 。基本上是差不多的。
AngularJS1.X学习笔记12-Ajax的更多相关文章
- Ext.Net学习笔记12：Ext.Net GridPanel Filter用法
Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- SQL反模式学习笔记12 存储图片或其他多媒体大文件
目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点: 1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...
- golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题
golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题 今天测试了重新建一个项目生成新的表,然后复制到旧的项目 ...
- Spring MVC 学习笔记12 —— SpringMVC+Hibernate开发（1）依赖包搭建
Spring MVC 学习笔记12 -- SpringMVC+Hibernate开发(1)依赖包搭建 用Hibernate帮助建立SpringMVC与数据库之间的联系,通过配置DAO层,Service ...
- 学习笔记：AJAX 跨域问题
学习笔记:AJAX 跨域问题 AJAX 跨域是浏览器的问题. 只要 xhr 请求,不同的域名就会出现 AJAX 跨域问题. JSONP 是一要简单方式,但是有很多弊端,需要修改服务端代码. JSONP ...
- Python3+Selenium3+webdriver学习笔记12（js操作应用：滚动条 日历 内嵌div）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...
- springmvc学习笔记(12)-springmvc注解开发之包装类型參数绑定
springmvc学习笔记(12)-springmvc注解开发之包装类型參数绑定 标签: springmvc springmvc学习笔记12-springmvc注解开发之包装类型參数绑定 需求 实现方 ...
- 并发编程学习笔记(12)----Fork/Join框架
1. Fork/Join 的概念 Fork指的是将系统进程分成多个执行分支(线程),Join即是等待,当fork()方法创建了多个线程之后,需要等待这些分支执行完毕之后,才能得到最终的结果,因此joi ...
- matlab学习笔记12单元数组和元胞数组 cell,celldisp,iscell,isa,deal,cellfun,num2cell,size
一起来学matlab-matlab学习笔记12 12_1 单元数组和元胞数组 cell array --cell,celldisp,iscell,isa,deal,cellfun,num2cell,s ...
随机推荐
- Android OpenGL ES 开发（八）: OpenGL ES 着色器语言GLSL
前面的文章主要是整理的Android 官方文档对OpenGL ES支持的介绍.通过之前的文章,我们基本上可以完成的基本的形状的绘制. 这是本人做的整理笔记: https://github.com/re ...
- Mininet简介
在Coursera SDN开放课程中,编程作业要用Mininet来完成.这里对Mininet做一个简单的介绍. 什么是Mininet Mininet是由一些虚拟的终端节点(end-hosts).交换机 ...
- Sharepoint Management Shell命令
1.普通WSP包,没有特殊激活内容 安装BBA.WebParts.wsp 1) Add-SPSolution -LiteralPath "c:\BBA.WebParts.wsp" ...
- Python 3 中生成器函数yield表达式的使用
生成器函数或生成器方法中包含了一个yield表达式.调用生成器函数时,会返回一个迭代子,值从迭代子中每次提取一个(通过调用其__next__()方法).每次调用__next__()时,生成器函数的yi ...
- 关于IPFS的热门问题
最近小编在公众号收到了一些提及比较高的问题,今天总结一下统一回答 目前网络上有一些对ipfs的解读五花八门,各式各样,有看好的,也有打击的,总之一项新技术诞生之初遇到的问题IPFS都遇到了. 问题 ...
- javascript中函数的闭包自调用
话不多说, 直接上代码 // 定义一个变量outerParam, 然后使用一个闭包函数给该变量初始化var outerParam = (function testClosure(param) { // ...
- mysql5.6 绿色免安装版 安装详解
一.安装版本简介 MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的.很多人下了zip格式的解压发现没有setup.exe, ...
- Mycat 分片规则详解--日期（天）分片
实现方式:按照日期来分片 优点:使数据按照日期来进行分时存储 缺点:由于数据是连续的,所以该方案不能有效的利用资源 配置示例: <tableRule name="sharding-by ...
- nbtstat
某个主机的ip地址为:192.168.155.1 我们通过nbtstat -a ip命令就可知道这个主机的名称信息.
- 前端的UI设计与交互之布局篇
布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...