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"]便可；