angularjs $http post is not sending data

Question

I am little bit frustrated with my below angular code, as it is not sending the JSON data to my spring boot based micro-service running in the same machine. Please help me out! FYI, I am a newbie to JavaScript world.

$scope.addBook = function() {
    var data = $.param({
        json: JSON.stringify({
            name: $scope.bookName,
            isbn: $scope.isbn,
            author: $scope.authorName,
            pages: $scope.pages
        })
    });

    var config = {
        headers : {
            'Content-Type': 'application/json'
        }
    }

    var result = $http.post('http://localhost:8080/book', data, config);
    result.success(function (data, status, headers, config) {
        $scope.result = JSON.stringify({data: data});
    });
    result.error(function (data, status, header, config) {
        $scope.result = JSON.stringify({data: data});
    });
};

What you are getting in your console ? where you are getting error ? are you able to access the success data after success callback ? — ojus kulkarni, Mar 08 '16 at 17:44

score 3 · Answer 1 · answered Mar 08 '16 at 17:44

3

You don't need to run JSON.stringify or $.param, just pass the object directly to $http.post(). Angular creates the JSON for you.

answered Mar 08 '16 at 17:44

Prashant

7,340
2
25
24

score 1 · Accepted Answer · edited Apr 22 '20 at 12:15

Just pass your data object like this:

$scope.addBook = function() {
        var data = 
            {
                name: $scope.bookName,
                isbn: $scope.isbn,
                author: $scope.authorName,
                pages: $scope.page
        };

        var config = {
            headers : {
                'Content-Type': 'application/json'
            }
        };

        var result = $http.post('http://localhost:8080/book', data, config);
        result.success(function (data, status, headers, config) {
            $scope.result = JSON.stringify({data: data});
        });
        result.error(function (data, status, header, config) {
            $scope.result = JSON.stringify({data: data});
        });
    };

You don't need to stringify it. You probably can remove the stringify form the result you get too if your service is returning JSON.

I had another issue - XMLHttpRequest cannot load http://127.0.0.1:8080/book. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. Which I have fixed using this link : http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — Rajib Deka, Mar 08 '16 at 19:32

score 0 · Answer 3 · answered Mar 08 '16 at 17:46

I think $http does not send stingifyed data.

Try

$scope.addBook = function() {
    var data = {
            name: $scope.bookName,
            isbn: $scope.isbn,
            author: $scope.authorName,
            pages: $scope.pages
        };

    $http.post('http://localhost:8080/book', data)
        .success(function (data, status, headers, config) {
            $scope.result = JSON.stringify({data: data});
        })
        .result.error(function (data, status, header, config) {
            $scope.result = JSON.stringify({data: data});
        });
};

score 0 · Answer 4 · answered Mar 08 '16 at 17:46

0

Change your data to the following. It should work

var data = $.param({
                'name': $scope.bookName,
                'isbn': $scope.isbn,
                'author': $scope.authorName,
                'pages': $scope.pages
        });

answered Mar 08 '16 at 17:46

amanpurohit

1,246
11
19

angularjs $http post is not sending data

4 Answers4