Tutorial :jQuery JSONP, only works with same site URLs


I need to make a request to an API which returns json formatted data. This API is on a sub-domain of the domain this script will run off (although at the moment it's on a totally different domain for dev, localhost)

For some reason I thought that jsonp was supposed to enable this behavior, what am I missing?

Using jQuery 1.4.2

$.ajax({      url:'http://another.example.com/returnsJSON.php',      data: data,      dataType:'jsonp',      type: "POST",      error: function(r,error) {          console.log(r);          console.log(error);      },      success:function(r){      console.log(r);      }  });  


You'll need a combination of Arnaud's answer (don't use POST) and R. Bemrose's answer (make sure server-side returns JSONP), with the added specification of a callback function.

In other words, here's your modified request code:

function dosomething(data) {      console.log(data);  }    $.ajax({      url: 'http://another.example.com/returnsJSON.php',      data: data,      dataType: 'jsonp'  });  

Helpful to note that in the generated code you'll see that when the dataType is "jsonp", jQuery outputs a script tag pointing at the url; it's not a typical XHR. You could also use jQuery's getJSON() here.

Then your response will have to be formatted as such:

dosomething({      test: 'foo'  });  

When the call is complete, your specified callback will fire.


Change your type from "POST" to "GET". That is, only if you intend to retrieve data.


Did you modify the server-side component to use JSONP?

You can't just tell the client to use JSONP and suddenly expect a JSON script on the server-side to return the correct result.

Specifically, JSONP requires the server to return a JavaScript string that calls a specific function (whose name is passed in with the other arguments) with the return results, which the client then evals.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »