AngularJs(十一)--服务-- $http服务

回顾

回顾之前学过的服务:
- scopewatch
- applyrootScope
- timeoutinterval
- $filter

$http服务

与原生JS中的Ajax作用非常类似;
已经帮我们封装好了很多方法,特别类似jQuery中的ajax方法。

ngHttp.html:

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script >
            var m1 = angular.module('myApp',[]);
            m1.controller('Aaa',['$scope','$http',function($scope,$http){
                //$http的成功或失败时通过promise的方式来实现,与jQuery中的非常相似
                $http({
                    method: 'GET',//'JSONP','POST'...
                    url: 'data.php'
                }).success(function(data,state,headers,config){
                    console.log(data);//hello
                }).error(function(data){
                    console.log(data);//打印错误的页面内容
                });
            }]);
        </script>
    </head>
    <body>
        <div ng-controller= "Aaa"> </div>
    </body>
    </html>
</pre>

data.php

<pre>
    <?PHP
        echo 'hello';
    ?>
</pre>

运行结果如下图所示:
<img src="0.png"/>
报错原因:
看文档 https://docs.angularjs.org/ap…$http ,新版本的angular中取消了success 和 error方法。现在采用promise的写法。
故改成:

<pre>
     $http({
            method: 'GET',
            url: 'data.php'
        }).then(function(data,state,headers,config){
            console.log(data);//hello
        },function(data){
            console.log(data);
        });
</pre>

再次运行,得到结果如下:
<img src="1.png"/>

method

请求方法:GET / POST /JSONP

success 与 error

请求成功或失败的回调函数。

success共有四个参数:
- data:数据
- state:请求结果的状态(200/…)
- headers
- config

$http.get()

$http.get() – get方式请求,其实是上述格式的一种简写方式。
$http.get('data.php')
.then(function(data,state,headers,config){
console.log(state);//200
});

运行效果与$http()写法的运行效果相同。

百度搜索实例

<pre>
    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/angular.min.js"></script>
        <script >
            var m1 = angular.module('myApp',[]);
            m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
                $scope.data = [];
                var timer=null;

                $scope.change = function(name){
                    $timeout.cancel(timer);
                    //加入$timeout是为了避免在输入搜索关键词的时候,每输入一个字母会一直出发鼠标抬起事件从而
                    //导致发送http请求,这样会非常消耗性能;而是在输入停顿的时候发送http请求
                    timer = $timeout(function(){
                        $http({
                            method: 'JSONP',
                            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK'
                        }).then(function(data,state,headers,config){
                            console.log(data);
                            $scope.data= data.s;
                        },function(data){
                            console.log(data);
                        });
                    },500);
                };
            }]);
        </script>
    </head>
    <body>
    <div ng-controller= "Aaa">
        <input type="text" ng-model="name" ng-keyup="change(name)"/>
        <input type="button" name="submit" ng-click="change(name)" value="搜索">
        <ul>
            <li ng-repeat="d in data">{{d}}</li>
        </ul>
    </div>
    </body>
    </html>
</pre>

运行结果,如下所示:
<img src="2.png"/>

$location服务

$location服务实际上是对Javascript原生的loaction(网址信息)进行二次封装,优化出很多好用的方法。

absUrl()

获得网址信息的绝对地址(而且是编码好了的)

    <pre>
        <!DOCTYPE html>
        <html lang="en" ng-app="myApp">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="js/angular.min.js"></script>
            <script >
                var m1 = angular.module('myApp',[]);
                m1.controller('Aaa',['$scope','$location',function($scope,$location){
                    var a = $location.absUrl();
                    console.log(a);
                }]);
            </script>
        </head>
        <body>
        <div ng-controller= "Aaa">

        </div>
        </body>
        </html>
    </pre>

运行结果如下:
<img src="3.png"/>

path()

获取或设置路径。
这里的“路径”是angularJs特别设置的一种方式,有利于后期的路由操作。
- 获取路径
var p = $location.path();
console.log(p);

运行结果如下:
<img src="4.png"/>

  • 设置路径

$location.path('aaa');
var p = $location.path();
console.log(p);

运行结果如下:
<img src="5.png"/>
打印结果,path即为”/aaa”;并且发现,在浏览器的地址栏中自动加入了”#/aaa”。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qianxing111/article/details/79964080
个人分类: angularjs
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

AngularJs(十一)--服务-- $http服务

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭