$ http post in Angular.js

Question

我剛開始學習Angular.js。如何在Angular.js中重寫以下代碼？

var postData = "<RequestInfo> " 
      + "<Event>GetPersons</Event> "   
     + "</RequestInfo>"; 

    var req = new XMLHttpRequest(); 

    req.onreadystatechange = function() { 
     if (req.readyState == 4 || req.readyState == "complete") { 
      if (req.status == 200) { 
       console.log(req.responseText); 
      } 
     } 
    }; 

    try { 
     req.open('POST', 'http://samedomain.com/GetPersons', false); 
     req.send(postData); 
    } 
    catch (e) { 
     console.log(e); 
    } 

這裏是我迄今爲止 -

function TestController($scope) { 
     $scope.persons = $http({ 
      url: 'http://samedomain.com/GetPersons', 
      method: "POST", 
      data: postData, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function (data, status, headers, config) { 
       $scope.data = data; // how do pass this to $scope.persons? 
      }).error(function (data, status, headers, config) { 
       $scope.status = status; 
      }); 

} 

HTML

<div ng-controller="TestController">  
    <li ng-repeat="person in persons">{{person.name}}</li> 
</div> 

上午我在正確的方向？

Answer 1

在您當前的函數中，如果您將$scope.persons指定爲$http這是一個承諾對象，因爲$http會返回一個承諾對象。

因此，而不是分配給scope.persons $ HTTP應先分配$scope.persons的$http成功裏面如下所述：

function TestController($scope, $http) { 
     $http({ 
      url: 'http://samedomain.com/GetPersons', 
      method: "POST", 
      data: postData, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function (data, status, headers, config) { 
       $scope.persons = data; // assign $scope.persons here as promise is resolved here 
      }).error(function (data, status, headers, config) { 
       $scope.status = status; 
      }); 

} 

Answer 2

下面是阿賈伊貝尼給出的解決方案的變化。使用方法然後允許鏈接多個承諾，因爲然後返回一個新的承諾。

function TestController($scope) { 
    $http({ 
     url: 'http://samedomain.com/GetPersons', 
     method: "POST", 
     data: postData, 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
    }) 
    .then(function(response) { 
      // success 
     }, 
     function(response) { // optional 
      // failed 
     } 
    ); 
} 

Answer 3

使用$ HTTP：

AngularJS: API: $http

$http.post(url, data, [config]); 

實現的例子：

$http.post('http://service.provider.com/api/endpoint', { 
     Description: 'Test Object', 
     TestType: 'PostTest' 
    }, { 
     headers { 
      'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 
      'Accept': 'application/json;odata=verbose' 
     } 
    } 
).then(function (result) { 
    console.log('Success'); 
    console.log(result); 
}, function(error) { 
    console.log('Error:'); 
    console.log(error); 
}); 

讓我們打破這：鏈接有點明顯，所以我們跳過這個.. 。

1. 數據：這是你的郵遞員要求

   { 
       Description: 'Test Object', 
       TestType: 'PostTest' 
   } 
   

2. 配置的主體內容：這是我們可以注入頭，事件處理，緩存......看到AngularJS: API: $http: scroll down to config頭是最常見的郵遞員變種HTTP，人們很難複製在angularJS

   { 
       headers { 
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==', 
        'Accept': 'application/json;odata=verbose' 
       } 
   } 
   

3. 迴應：$ HTTP動作返回一個角的承諾，我建議使用。那麼（successFunction，誤差函數）來處理這一承諾看AngularJS: The Deferred API (Promises)

   .then(function (result) { 
       console.log('Success'); 
       console.log(result); 
   }, function(error) { 
       console.log('Error:'); 
       console.log(error); 
   });