$http post in Angular.js

Question

I've just started learning Angular.js. How do I re-write the following code in 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);
    }

Here's what I have so far -

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>

Am I in the right direction?

yarl · Accepted Answer · 2015-01-14 14:56:53Z

41

In your current function if you are assigning $scope.persons to $http which is a promise object as $http returns a promise object.

So instead of assigning scope.persons to $http you should assign $scope.persons inside the success of $http as mentioned below:

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

}

edited Jan 14, 2015 at 14:56

yarl

3,2251 gold badge24 silver badges28 bronze badges

answered Apr 9, 2013 at 6:59

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stefan Walther Over a year ago

Thanks, I have tried so many solutions but headers: {'Content-Type': 'application/x-www-form-urlencoded'} did the trick

M. Ali Over a year ago

Please note that the success and error functions have deprecated now.

georgeawg Over a year ago

See Why are angular $http success/error methods deprecated? Removed from v1.6?

jpmorin · Accepted Answer · 2013-04-11 03:22:48Z

13

Here is a variation of the solution given by Ajay beni. Using the method then allows to chain multiple promises, since the then returns a new promise.

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

answered Apr 11, 2013 at 3:22

jpmorin

6,0182 gold badges31 silver badges39 bronze badges

Comments

Chris Schaller · Accepted Answer · 2017-03-15 11:01:47Z

use $http:

AngularJS: API: $http

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

Implementation example:

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

Lets break this down: Url is a little obvious, so we skip that...

data: This is the body content of your postman request

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

config: This is where we can inject headers, event handlers, caching... see AngularJS: API: $http: scroll down to config Headers are the most common postman variant of http that people struggle to replicate in angularJS
```
{
    headers {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
    }
}
```
Response: the $http actions return an angular promise, I recommend using .then(successFunction, errorFunction) to process that promise see AngularJS: The Deferred API (Promises)
```
.then(function (result) {
    console.log('Success');
    console.log(result);
}, function(error) {
    console.log('Error:');
    console.log(error);
});
```

Collectives™ on Stack Overflow

$http post in Angular.js

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related