Converting $.ajax call to $http call in angular 404 error

Question

I'm working on converting a jquery ajax call to an angular $http call, but for some reason am returning a 404 status. Here is the original jquery call.

function getStaffInfo(){                    
    $.ajax({
        url: 'https://my.website.com/j/wkr/stafflist.php',
        data: {f: 'staff'},
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'vcLoadStaff',
        success: function(){
                                //alert("success");
        }
    });
}

Here is the angular $http call:

app.service('staffList', function($http){

var staffList = {};

$http.jsonp('https://my.website.com/j/wkr/stafflist.php', {"f":"staff"})
.success(function(data, status, headers, config) {
        console.log(data);
        staffList = data;
    }).error(function(data, status, headers, config) {
        console.log(status);
});

return staffList;

});

Am I missing something in my angular code?

add {"f":"staff", "callback":"jsonp_callback" } in side params — Pankaj Parkar
– Pankaj Parkar, Commented Dec 30, 2014 at 19:25

Community · Accepted Answer · 2017-05-23 10:26:08Z

1

I believe you need to append ?callback=JSON_CALLBACK to your URL.

$http.jsonp('https://my.website.com/j/wkr/stafflist.php?callback=JSON_CALLBACK', {"f":"staff"})
.success(function(data, status, headers, config) {
        console.log(data);
        staffList = data;
    }).error(function(data, status, headers, config) {
        console.log(status);
});

Edit: Just to clarify, when you make that change, the resulting data will be wrapped in JSON_CALLBACK([...]). Also check out this relevant answer.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Dec 30, 2014 at 19:27

Noel

3,6461 gold badge28 silver badges44 bronze badges

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

Comments

zia grosvenor · Accepted Answer · 2014-12-30 19:44:45Z

The http service returns the payload as a promise so you may find you have to call success on the service inside the controller you are using it in like so..

app.service('staffList', function ($http) {
    return {
        getList: function () {
            $http.jsonp('https://my.website.com/j/wkr/stafflist.php?callback=JSON_CALLBACK', {"f":"staff"})
        }
    };
});

app.controller('staffController', [$scope, staffList, 
    function($scope, staffList) {

        staffList.getList().success(function(data, status, headers, config) {
            console.log(data);
        }).error(function(data, status, headers, config) {
            console.log(status);
        });
    }
]);

The angular $q service may also be useful although I found the above implementation some what easier to use.

https://docs.angularjs.org/api/ng/service/$q

Seth · Accepted Answer · 2014-12-30 19:39:41Z

0

At angular documentation your $http.jsonp can be like this:

jsonp(url, [config]);

So you may try

$http.jsonp('https://my.website.com/j/wkr/stafflist.php', {data:{"f":"staff"}})

https://docs.angularjs.org/api/ng/service/$http#jsonp

edited Dec 30, 2014 at 19:39

Seth

5263 gold badges18 silver badges32 bronze badges

answered Dec 30, 2014 at 19:25

selami

13 bronze badges

Collectives™ on Stack Overflow

Converting $.ajax call to $http call in angular 404 error

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related