Difficulties using JSONP in jQuery

Question

I've been reading up on JSONP and trying to get a working implementation. The code below represents my understanding of what this is supposed to look like using jQuery. For some reason I can't get this working, and I don't know why. I've seen many example scripts online, but for some reason, none of them work for me. Can anyone help? Am I doing this correctly?

Here's the JSONP script:

<script type="text/javascript">
$(document).ready(function() {
    var url =  "http://www.example.com/blog/?json=get_recent_posts";
    $.getJSON(url + "?callback=?", function(data) {
        $("#output_div").append("<p>" + data.posts[2].title + "</p>");
        }
    });
});
</script>

... and I wrote a div like this:

<div id="output_div"> </div>

Thanks!

Does the server your requesting the data from actually return JSONP, and it's not the same as regular JSON, as JSONP is wrapped in a function and works completely different from an ajax call. — adeneo
– adeneo, Commented Nov 15, 2013 at 0:08
No, to my knowledge, it returns regular JSON. I didn't know that it had to be output in JSONP as well. I haven't seen any mention about that in all my reading. I was of the understanding that JSONP is just a client-side implementation. Is that incorrect? — shmuli
– shmuli, Commented Nov 15, 2013 at 0:11
That is incorrect, JSONP gets around the cross-origin problem by inserting a script tag into the DOM, so it's not really an XMLHttpRequest, but it's neatly wrapped up like one in jQuery, and to get the data from the inserted script the JSON must be wrapped in a function, which would be the callback function, and jQuery creates a random name for that function and calls it when the script has loaded to get the content. In other words, to do a JSONP call, the server has to return valid JSONP, and not just JSON. — adeneo
– adeneo, Commented Nov 15, 2013 at 0:14
On the other hand, many API's support CORS, where this isn't an issue ? — adeneo
– adeneo, Commented Nov 15, 2013 at 0:15
The server either returns valid JSONP, it supports CORS, or it's not cross-origin. — adeneo
– adeneo, Commented Nov 15, 2013 at 0:43

Arun P Johny · Accepted Answer · 2013-11-15 00:15:34Z

1

Since callback is the second parameter you need to use & to append it to the url like url + "&callback=?" or

$(document).ready(function () {
    var url = "http://www.example.com/blog/?json=get_recent_posts&callback=?";
    $.getJSON(url, function (data) {
        $("#output_div").append("<p>" + data.posts[2].title + "</p>");
    });
});

edited Nov 15, 2013 at 0:15

answered Nov 15, 2013 at 0:07

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

shmuli Over a year ago

That hasn't affected the results... Chrome is giving me the following syntax error: "Unexpected token }". What is that?

Arun P Johny Over a year ago

@shmuli there were an additional } in the code... fixed now

shmuli Over a year ago

Thanks, that got it working! Now I can study this and learn this deeper. I appreciate your help!:)

shmuli Over a year ago

I tried to click on the check and I accidentally hit the downvote. I removed the downvote and marked this as the correct answer. So the system should remove that downvote for you...

Collectives™ on Stack Overflow

Difficulties using JSONP in jQuery

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