Angular--$http服务

关于Angular中$http 服务是对XMLHttpRequest 对象的封装,向服务器发送请求;

下面自己在angular中$http学习的一个记录,

GET请求(先贴码)

angualr代码:

var app = angular.module('app',[]);
    

    app.controller('contr',['$scope', '$http', '$window',function($scope, $http, $window){
        $scope.num = "0";
        $scope.result = "偶数";

        $scope.chk = function(){
            $http({
                method: 'POST',
                url: '/chk.php',
                params: {
                    num: $scope.num
                }
            }).success(function(data, status, headers, config){
                
                data = angular.fromJson(data);
                $scope.result = data['type'];

            }).error(function(data, status, headers, config){
                
                console.log('faild!');

              });
        };

    }]);

PHP代码:

<?php 

function chk($num){
    return ($num%2) == 0 ? true : false;
}

//$num = $_POST["num"];
$num = $_GET["num"];

if (chk($num)){
    echo '{"type": "偶数"}';
} else {
    echo '{"type": "奇数"}';
}

?>
View Code

 

$http方法有俩种写法,第一种是上面的写法,另一种是promise的写法;$http().then(fn({data, status, statusText, headers}), fn2()); 

针对GET请求,我目前发现$http服务只需要关注三个参数:method, url, params; 根据succuss函数返回data中的具体数据转化,如果是json数据需要使用angular.fromJson()方法进行转化,

 

POST请求(先贴码)

var app = angular.module('app',[]);
    

    app.controller('contr',['$scope', '$http', '$window',function($scope, $http, $window){
        $scope.num = "0";
        $scope.result = "偶数";

        $scope.chk = function(){
            $http({
                method: 'POST',
                url: '/chk.php',
                data: {
                    num: $scope.num
                },
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },    
                transformRequest: function(obj) {    
                    var str = [];    
                    for (var p in obj) {    
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));    
                    }    
                    return str.join("&");    
                } 
            }).success(function(data, status, headers, config){
                
                data = angular.fromJson(data);
                $scope.result = data['type'];

            }).error(function(data, status, headers, config){
                
                console.log('faild!');

              });
        };

    }]);
View Code

在使用angular的$http中的POST请求时,需要关注的参数要比GET多:method, url, data, headers, transformRequest;上述参数必须设置,不然后端可能无法获取到(可能我的php知识太菜了,只能写那种简单的获取方式 - -);

在php代码中我就不重复贴,只是将对应的$_GET["value"]换成 $_POST["value"]即可;

 

posted on 2016-11-11 12:06  源人  阅读(353)  评论(0编辑  收藏  举报

导航