返回首页 | 注册送体验金88送现金

合作共赢、快速高效、优质的网站建设提供商

更多精品源码-尽在织梦模板-www.moke8.com

AngularJS中$http效劳内容

时间:2017-09-23 编辑:admin

运用$http方便办法与效劳端交互
在AngularJS中页面与效劳端交互主要是调用模块。
依据恳求类型的不同,$http模块供给了不同的调用办法 ,其通用的格局如下。

参数解说:
url:表明一个相对或肯定的效劳端恳求途径;
恳求类型:包含POST、GET、JSONP、DELETE、PUT、HEAD这6种常见的恳求办法.其间POST和PUT类型恳求能够经过可选项参数data来发送数据,还能够经过可选项参数config来设置恳求时传递的数据。

当$http恳求成功时,能够在回调的success办法中获取效劳端回来的数据和相关信息。
data:表明参数回来体,通常是恳求回来的成果集。
status:表明恳求后回来的状态值。
headers:表明恳求后回来的头文件,用来显现回来恳求的头部信息。
config:是一个目标,经过该目标,能够获取发送HTTP恳求时完好的装备信息。

运用$http装备目标办法与效劳端交互
上面我们介绍了运用/$http方便办法与效劳端交互的进程,这种办法尽管简洁,可是装备时短少灵活性,代码量也不少。针对这一状况,我们能够将\$http效劳模板当成一个函数来运用,将结构XHR目标的一切装备项作为一个目标,并将目标界说为函数的形参,在调用时,只需求修正目标中的各特点值即可,具体的调用格局如下。

$http({
    method: //表明恳求办法,是字符串,常有POST、GET、JSONP、DELETE、PUT、HEAD六种办法
    url:    //表明向效劳器恳求的地址
    data:   //是一个目标,在运用POST/PUT时,该目标将作为音讯体的一部分发给效劳端
    params: //是字符串或目标,发送HTTP恳求时,如果是目标,将主动按json格局进行序列化,并追加到url后边,作为发送数据的一部分,传递给效劳器。
    transformRequest://对恳求体信息和恳求体进行序列化变换,并生成一个数组发送给效劳端。
    transformResponse://对相应体头信息和相应体进行反序列化变换,其实质就是解析效劳器发送来的被序列化后的数据。
    cache://布尔值(true/false),表明是否对http恳求回来的数据进行缓存,如果设置为true,则表明需求缓存。
    timeout://表明推迟http恳求的时刻,单位是毫秒。})

例如:
需求阐明:
在页面中增加一个文本框按钮。,当用户在文本框中输入数字今后,单击按钮,则调用$http函数向效劳端发送HTTP恳求,验证数字的奇偶性,并将验证成果显现在页面元素中。

<!DOCTYPE html><html ng-app="a7_3"><head>
    <meta charset="UTF-8">
    <title>运用$http装备目标办法与效劳端交互</title>
    <script src="../script/angular.min.js"></script>
    <link href="Css/css7.css" rel="stylesheet" ></head><body>
    <p class="frame" ng-controller="c7_3">
        <p class="show">
            <input type="text" ng-model="num">
            <button ng-click="onclick()">验证奇偶</button>
            <p class="***">您输入的是:{{result}}</p>
        </p>
    </p>
    <script type="text/javascript">
        angular.module('a7_3',[])
            .controller('c7_3',function($scope,$http){
                $scope.num = 0;
                $scope.result = "偶数";
                $scope.onclick = function(){
                    $http({
                        method: 'GET',
                        url: 'data/chk.php',
                        params:{
                            n: $scope.num
                        }
                    }).success(function(data,status,headers,config){
                        $scope.result = data;
                    })
                }
            });    
      </script>
    </body>          
 </html>

解析:
在本示例的js代码中,当用户点击按钮时,触发按钮绑定的onclick办法,在该办法中,调用了$http效劳,并以装备目标的办法向函数传参,如method、url等特点值,
由于采用了GET办法恳求,因而,经过params特点将文本框中的值以key/value的方式传递给效劳器。
在本示例中,恳求的URL终究内容为
htpp://localhost/Ch7/data/chk.php?n=87,其间n为键名,87为键值,也就是文本框中输入的数字。

当/$http函数发送HTTP恳求后,能够经过succes办法获取效劳器回来的数据内容和其他头信息,如data则是回来的数据,也就是文本框中用户输入的数字。

在Angular中,履行/$http函数后,它的回来内容其实是一个promise目标,因而,能够直接经过链式的写法调用then办法获取成功和反常后的数据。

下面两段代码功用是相同的。

$http({//装备目标})
.succes(fn1)
.error(fn2)

等价于

$http({//装备目标
})
.then(fn1,fn2)

fn1和fn2别离表明恳求成功和过错是的回来函数。
尽管两者的功用相同。可是运用then办法能够接纳到效劳端的完好呼应目标,而succes和error办法仅仅接纳解析并处理后的呼应目标,也就是说then办法获取的回来目标更原始和更完好。

以上就是AngularJS中$http效劳内容的具体内容,更多请重视其它相关文章!


浏览:

网站建设

流程

    网站建设流程