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

 Ajax 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也是好的,如此,整个模块Ajax的响应都见面带这个真谛了。

  默认配置起还有许多,自己拘留文档去。

  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 。基本上是大半的。

相关文章