$ http Post in Angular.js

Question

Ich habe gerade angefangen Angular.js zu lernen. Wie schreibe ich den folgenden Code in Angular.js neu?

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); 
    } 

Hier ist, was ich bisher haben -

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> 

Bin ich in die richtige Richtung?

Answer 1

In Ihrer aktuellen Funktion, wenn Sie $scope.persons zu $http zuweisen, die ein Versprechen-Objekt ist, wie $http gibt ein Versprechen-Objekt zurück.

Also statt scope.persons auf $ http zuweisen sollten Sie $scope.persons in dem Erfolg von $http zuweisen, wie unten erwähnt:

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

Hier ist eine Variation der von Ajay beni gegebenen Lösung. Mit der Methode können dann mehrere Versprechen miteinander verketten, da die dann ein neues Versprechen zurückgibt.

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

Verwendung $ http:

AngularJS: API: $http

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

Implementierung Beispiel:

$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); 
}); 

diese Lets brechen: Url ein wenig offensichtlich ist, so wir, dass überspringen ..

1. Daten: Dies ist der Körper Inhalt Ihrer Postbote Anfrage

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

2. config: Dies ist, wo wir Header injizieren können, Event-Handler, Caching ... siehe AngularJS: API: $http: scroll down to config Headers die häufigste Postbote Variante sind http dass Menschen kämpfen AngularJS

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

3. Antwort zu replizieren in: die $ http Aktionen eine Winkel versprechen zurückzukehren, empfehle ich .then (successFunction, Fehlerfunktion) zu Prozess, sehen AngularJS: The Deferred API (Promises) versprechen

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