web-dev-qa-db-fra.com

$ http post in Angular.js

Je viens de commencer à apprendre Angular.js. Comment réécrire le code suivant dans 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);
    }

Voici ce que j'ai jusqu'à présent -

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>

Suis-je dans la bonne direction?

angularjsangular-http
18
tempid

Dans votre fonction actuelle, si vous affectez $scope.persons à $http, lequel est un objet de promesse, car $http renvoie un objet de promesse.

Donc, au lieu d’attribuer scope.persons à $ http, vous devriez assigner $scope.persons dans le succès de $http comme mentionné ci-dessous:

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

}
41
Ajay Beniwal

Voici une variante de la solution donnée par Ajay beni . Utiliser la méthode then permet de chaîner plusieurs promesses, puisque le then renvoie une nouvelle promesse.

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

utiliser $ http:

AngularJS: API: $ http

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

Exemple d'implémentation:

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

Décrivons cela: Url est un peu évident, alors nous sautons cela ...

  1. data: il s'agit du contenu du corps de votre demande de postier

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

  2. config: C’est ici que nous pouvons injecter des en-têtes, des gestionnaires d’événements, la mise en cache ... voir AngularJS: API: $ http: faites défiler vers le bas pour config Les en-têtes sont la variante la plus commune du facteur http que les gens ont du mal à reproduire dans angularJS

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

  3. Réponse: les actions $ http renvoient une promesse angulaire. Je recommande d'utiliser .then (successFunction, errorFunction) pour traiter cette promesse voir AngularJS: l'API différée (Promises)

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