说到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的更多相关文章

  1. Ext.Net学习笔记12：Ext.Net GridPanel Filter用法

    Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...

  2. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  3. SQL反模式学习笔记12 存储图片或其他多媒体大文件

    目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点:     1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...

  4. golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题

    golang学习笔记12 beego table name `xxx` repeat register, must be unique 错误问题 今天测试了重新建一个项目生成新的表,然后复制到旧的项目 ...

  5. Spring MVC 学习笔记12 —— SpringMVC+Hibernate开发（1）依赖包搭建

    Spring MVC 学习笔记12 -- SpringMVC+Hibernate开发(1)依赖包搭建 用Hibernate帮助建立SpringMVC与数据库之间的联系,通过配置DAO层,Service ...

  6. 学习笔记：AJAX 跨域问题

    学习笔记:AJAX 跨域问题 AJAX 跨域是浏览器的问题. 只要 xhr 请求,不同的域名就会出现 AJAX 跨域问题. JSONP 是一要简单方式,但是有很多弊端,需要修改服务端代码. JSONP ...

  7. Python3+Selenium3+webdriver学习笔记12（js操作应用：滚动条 日历 内嵌div）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...

  8. springmvc学习笔记(12)-springmvc注解开发之包装类型參数绑定

    springmvc学习笔记(12)-springmvc注解开发之包装类型參数绑定 标签: springmvc springmvc学习笔记12-springmvc注解开发之包装类型參数绑定 需求 实现方 ...

  9. 并发编程学习笔记(12)----Fork/Join框架

    1. Fork/Join 的概念 Fork指的是将系统进程分成多个执行分支(线程),Join即是等待,当fork()方法创建了多个线程之后,需要等待这些分支执行完毕之后,才能得到最终的结果,因此joi ...

  10. 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 ...

随机推荐

  1. Java仪器数据文件解析-PDF文件

    一.概述 使用pdfbox可生成Pdf文件,同样可以解析PDF文本内容. pdfbox链接:https://pdfbox.apache.org/ 二.PDF文本内容解析 File file = new ...

  2. elfinder源码浏览-Volume文件系统操作类（1）

    今天看了一个文件管理的java后台源码,elfinder 发现这个东东比我写的代码效率告到不知道哪去了,苦思冥想后还是抽点时间看看吧.. 它实现了我们电脑上的所以关于文件操作的动作,并生成了api开放 ...

  3. sshpass的使用方法

    author:headsen  chen date : 2017-11-29  15:46:39 notice:created  by  headsen chen himself   and not ...

  4. Cesium解决按住滚轮旋转时进入地下的问题

    viewer.clock.onTick.addEventListener(function () {       setMinCamera()})  var setMinCamera = functi ...

  5. 一步步教你开发、部署第一个去中心化应用(Dapp) - 宠物商店

    今天我们来编写一个完整的去中心化(区块链)应用(Dapps), 本文可以和编写智能合约结合起来看. 写在前面 阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你先看以太坊是什么除此之 ...

  6. Java日志框架：slf4j作用及其实现原理

    简单回顾门面模式 slf4j是门面模式的典型应用,因此在讲slf4j前,我们先简单回顾一下门面模式, 门面模式,其核心为外部与一个子系统的通信必须通过一个统一的外观对象进行,使得子系统更易于使用.用一 ...

  7. C语言第十次博客作业--结构体

    一.PTA实验作业 题目1: 结构体数组按总分排序 1. 本题PTA提交列表 2. 设计思路 求出每名学生的总分 定义i,j循环变量 for i=0 to n for j=0 to 3 p[i].su ...

  8. es6使用技巧

    ##1.通过参数默认值实现强制参数 ES6 的参数默认值只有在真正使用时才会求值.这可以让你强制确保提供参数: /** * Called if a parameter is missing and * ...

  9. UWP：可滚动的PivotHeader

    UWP开发里,Pivot真是个令人又爱又恨的控件.为了实现某些可滚动Header的效果,有些大佬甚至去掉了原本的Header,使用一个ListView或者ListBox自己画Header,不过这样会让 ...

  10. java编程基础知识及常见例题

    ⒈标识符: 只能包含数字.字母.下划线.$,并且不能以数字开头.语义直观规范 驼峰法则: 如:方法名.变量名采用驼峰法则 帕斯卡命名法: 如: 类.接口.枚举采用帕斯卡命名法包名:网址倒写,com.网 ...