AngularJSAngularJS1.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 配置请求路径

  

  

 

 

 

 

 

 

  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 。基本上是差不多的。

相关文章