How to use jQuery ajax to get a jsonp response from this json string

Question

I can't seem to find any info to help me with this OR I'm doing it all wrong which is most likely the case. I have some sample JSON data at this URL:

http://dev.plaidduckdesign.com/zen/album.php?aid=1037521524

NOTE: That page takes about 20 seconds to load....

I ran it through a json validator and it came back clean. I'm trying to request the data from that page just an ajax request with the jonsp dataType because it's not on the same domain. But nothing I'm doing is working. I just keep getting an unknown error. Here's my ajax request:

$.ajax({
    url: url,
    dataType: "jsonp",
    data: request,
    success: function(data, textStatus, jqXHR) {
        var obj = jQuery.parseJSON(rootData);
        alert(obj[0].url);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        //alert("error ") 
    } // end error:
}); // end ajax

I have yet to actually get the success method to fire, just errors.

Any information or pointing in the right direction is much appreciated.

I have, but I'm not sure I know how to properly use that. Everytime I add a callback: blah, I get an error: 'blah' not defined. If I add it like you said I still get errors and no results. I'm still weak in how to use the callback with jsonp, everything I've read in the last few days and posts don't really address how to pull data out of that if that's even what it's for. — RyGuy
– RyGuy, Commented Apr 1, 2013 at 5:49

Darin Dimitrov · Accepted Answer · 2013-04-01 05:50:07Z

1

In order for a cross domain call to work the remote server must support JSONP, not JSON. This doesn't seem to be the case. Currently the response looks like this:

[
    {
        url: "http://pizzutistudiosphotography.zenfolio.com/img/s8/v74/p1492770658-6.jpg?sn=3&tk=o4bxcOgmoSJ03SfRC3fclWNn73JkTdATCgOQI0JQxKA=",
        width: 640,
        height: 960,
        title: "F2013_0120_Daoust_001",
        copy: "© pizzuti studios photography | pizzutistudios.com",
        caption: "Please respect our copyright. For more information please visit <a target="_blank" href="http://pizzutistudios.com">http://pizzutistudios.com</a>"
    },
    {...}
]

which is a valid JSON. But in order for this to work the website need to support JSONP format, like this:

somecallback(
    [
        {
            url: "http://pizzutistudiosphotography.zenfolio.com/img/s8/v74/p1492770658-6.jpg?sn=3&tk=o4bxcOgmoSJ03SfRC3fclWNn73JkTdATCgOQI0JQxKA=",
            width: 640,
            height: 960,
            title: "F2013_0120_Daoust_001",
            copy: "© pizzuti studios photography | pizzutistudios.com",
            caption: "Please respect our copyright. For more information please visit <a target="_blank" href="http://pizzutistudios.com">http://pizzutistudios.com</a>"
        },
        {...}
    ]
)

where somecallback should be specified in the request.

You should contact the authors of the website and ask them if their site supports JSONP. If it doesn't you cannot consume it with an AJAX call. As an alternative you could write a server side script on your domain which will act as a bridge and send the request to the remote domain. And then send your AJAX request to your own script.

answered Apr 1, 2013 at 5:50

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

4 Comments

RyGuy Over a year ago

ok, I'm sorry to be such a newbie with this but I'm basically formatting the response back, so if I add 'somecallback' to the front of the array I can then call it back as jsonp? Thanks for your quick response by the way.

Ravi Gadag Over a year ago

@RyGuy no. Server need to Set it's Header to accept the JSONP.

Darin Dimitrov Over a year ago

But you cannot add it. It's the website that needs to support this format. If it doesn't it won't work.

RyGuy Over a year ago

Ok so I double checked the header in the php file that's serving the json and it's good. Then I added: echo $_GET['callback'] . '('.json_encode($oAlbum).')'; and we're all set! Finally I can't tell you how frustrating this has been. Everything is working. I should have made clear that I wrote the page that's serving the json so I can add whatever headers I need. I have to wait a couple minutes to mark it as the answer but I will ASAP. Thanks everyone.

Collectives™ on Stack Overflow

How to use jQuery ajax to get a jsonp response from this json string

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related