CODEWITHSUNDEEP
jqueryajaxjsonp
RyGuy
RyGuy

Reputation: 508

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

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.

Upvotes: 0

Views: 972

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038780

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.

Upvotes: 1

Related Questions