AngularJS $http简介1

大佬教程收集整理的这篇文章主要介绍了AngularJS $http简介1，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLhttprequest对象。

1、链式调用

$http服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成http请求的配置内容。这个函数返回一个promise对象，具有success和error两个方法。

$http({  
   method: String,url: String,params: object,data: String or object,headers: object,transformrequest: function transform(data,headersGetter) or an array of functions,transformResponse: function transform(data,cache: Boolean or Cache object,timeout: number,withCredentials: Boolean  
}).success(function(data,status,config,headers){
//响应成功
}).error(function(data,headers){
//处理响应失败
});

①method
可以是：GET/deletE/HEAD/JSONP/POST/PUT
②url:绝对的或者相对的请求目标
③params(字符串map或者对象)
这个键的值是一个字符串map或对象，会被转换成查询字符串追加在URL后面。如果值不是字符串，会被JSON序列化。
比如这个：

//参数会转为？name=ari的形式
$http({
params:{'name':'ari'}
});

④data(字符串或者对象)
这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。
从AngularJS 1.3开始，它还可以在POST请求里发送二进制数据。要发送一个blob对象，你可以简单地通过使用data参数来传递它。
例如：

var blob=new Blob(['Hello world'],{type:'text/plain'});
$http({
method:'POST',url:'/',data:blob
});

2、响应对象
AngularJS传递给then（）方法的响应对象包含了四个属性。
data
这个数据代表转换过后的响应体（如果定义了转换的话）
status
响应的http状态码
headers
这个函数是头信息的getter函数，可以接受一个参数，用来获取对应名字值
例如，用如下代码获取X-Auth-ID的值：

$http({
method: 'GET',url: '/api/users.json'
}).then (resp) {
// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});

config
这个对象是用来生成原始请求的完整设置对象。
status（字符串）
这个字符串是响应的http状态文本。
3.GET请求实例

<div class="container" ng-app="myApp" ng-controller="myCtrl">
    <div class="alert alert-danger">
        真实姓名：{{data.RealNamE}}
        <br />
        {{data}}
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function ($scope,$http) {
        //Get请求
        $http.get('/ashx/dataone.ashx',{
            params: { name: '张三' }
        }).success(function (data,headers) {
            //处理成功
            console.info(data);
            $scope.data = data;
            console.info(status);
            console.info(config);
            console.info(headers);
        })
        .error(function (data,headers) {
            //响应失败
            console.info(status);
            console.info(headers);
            console.info(config);
            console.info(data);

        });
    });
</script>

4.POST请求实例

<div class="container" ng-app="myApp" ng-controller="myCtrl">
    <div class="alert alert-danger">
        真实姓名：{{data.RealNamE}}
        <br />
        {{data}}
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp',$http) {
        //Post请求
        //默认情况下，后台接受Form参数失败
        var postData = {
            name: '李四',text: '大容量内容'
        };
        $http.post('/ashx/dataone.ashx',postData).success(function (data,headers) {
            //响应失败
            console.info(status);
            console.info(headers);
            console.info(config);
            console.info(data);

        });
    }).config(function ($httpProvider) {
        // 头部配置
        //$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
        //$httpProvider.defaults.headers.post['Accept'] = 'application/json,text/javascript,*/*; q=0.01';
        //$httpProvider.defaults.headers.post['X-requested-With'] = 'XMLhttprequest';
    });
</script>

5.$http请求实例

@H_197_67@<div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="alert alert-danger"> 真实姓名：{{data.RealNamE}} <br /> {{data}} </div> </div> <script type="text/javascript"> var app = angular.module('myApp',$http) { //Get请求 $http({ method: 'GET',url: '/ashx/dataone.ashx',params: { name: '张三',text: '内容' } }).success(function (data,headers) { $scope.data = data; console.info(data); }); //Post请求 //默认情况下，后台接受Form参数失败 var postData = { name: '李四',text: '大容量内容' }; $http({ url: '/ashx/dataone.ashx',method:'POST',data:postData }).success(function (data,headers) { //处理成功 console.info(data); $scope.data = data; console.info(status); console.info(config); console.info(headers); }); }); </script>Get请求成功

大佬总结

以上是大佬教程为你收集整理的AngularJS $http简介1全部内容，希望文章能够帮你解决AngularJS $http简介1所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。