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方法,发现报错了。

 AngularJS 1

  原本认为是投机敲错了,有对着自由男人的例证敲,结果要么报错,有没有搞错啊,竟然说success不是一个措施。后来才是到原来它从1.6版开首去掉了success和error方法,哎呀啊呀,你去就去吗,干嘛不给本人打个电话说声呢?!害得我搞半天。

  不瞎扯了。正确的响应包罗属性data,status,statusText,config,以及函数headers。出错时的响应为:咿,是千篇一律的,不过data是一个html代码。

二、配置Ajax请求

配置项 作用
data 发送数据
headers 设置请求头部
method 请求方法
params 设置url
timeout 设置超时时间
transformRequest 转换请求
trransformResponse 转换响应
url 配置请求路径

  

  

 

 

 

 

 

 

AngularJS,  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 。基本上是基本上的。

相关文章