Will jQuery $.getJSON() Do What I Need?

Question

I have been trying to write a script where I can post data to a page that is on a different domain than the domain the source page. I read all about the issues with doing that, and information has led me to the jQuery.getJSON function, but I am unsure if this will work.

Here is my scenario:

I have a handful of javascript variables (for this example, lets just use c1,c2,c3,c4 and c5). So, I want to send the values of those 5 variables to a script on another domain.

I understand how I would do this using something like $.get() or $.post() - I would do something similar to this :

$.post("myscript.php", { c1:c1, c2:c2, c3:c3, c4:c4, c5:c5 } );

I am unclear (1) if the getJSON will get me where I need, and (2) if YES, what difference there is in the jQuery call for the getJSON function (vs the .post function), as well as if there is anything different I need to do on the server end (for my purposes, I would just like to display the values back visually for now).

EDIT: In reading answers, maybe I need to clarify. What I am looking for is a way (if even possible) to send data from one page to another page on a different domain. I understand the security concerns, so if it's not possible, it sucks but I understand. But if there IS a way using jQuery, that's what I am looking for (and a small example using my c1 - c5 variables). Thanks.

Answer 1

Ofcourse you can send data to another server (cross domain) using $.getJSON() in JSONP mode. It's just that your data must be part of the querystring and you're limited in the amount of data that you can send since you cannot have infintitely long query strings. There will be no change in how you process data on the server side, since the request will appear as a normal HTTP GET with params.

Here's an example lifted from the jQuery API docs. This pulls in the 4 most recent dog pictures from the Flickr JSON API.

Working Demo

var c1 = "dog";
var c2 = "any";

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
    tags: c1,
    tagmode: c2,
    format: "json"
}, function(data) {
    $.each(data.items, function(i, item) {
        $("<img/>").attr("src", item.media.m).appendTo("#images");
        if (i == 3) return false;
    });
});

Notice how c1 and c2 are passed in as GET parameters. The jsoncallback=? parameter instructs jQuery to make the request as a JSONP request and is mandatory while making cross domain calls.

This is how your script could look:

var orderId = 1337;
var customer = encodeURIComponent("John Doe");
var amount = 420;

$.getJSON("http://www.otherserver?jsoncallback=?", {
    oId: orderId,
    cust: customer,
    amnt: amount
},

function(data) {
    //process response if any
});

Sample HTTP request generated:

http://www.otherserver/?jsoncallback=jQuery16305821700256783515_1315685969538&oId=1337&cust=John%2520Doe&amnt=420&_=1315685969636

HTH.

Answer 2

Not if you need to do a post. The name is fairly descriptive here: get ... json. It's a get request with processing of a json return. It seems however that what you're really interested in is sending the json, and you don't require anything special for that.

However, if your confusion has to do with the lack of a postjson function in jquery, then this may help http://abeautifulsite.net/blog/2008/05/postjson-for-jquery/

Answer 3

.post() method will send the data as http post request. Here, it'll automatically find the datatype of the data that you are sending(json or xml or etc..). while .getJSON() will send the send the data as http get request and here datatype of the data is JSON specified.

Answer 4

It sounds like there would be no use for getJSON() because are not specifying a handler to work with the result. getJSON is useful if you know that the datatype returned from the request is JSON.

Answer 5

You cannot make AJAX calls to another domain because the SOP (Same Origin Policy).

You could do it with a normal form POST, but that will force the browser to process the response (show a new HTML page, or perform a redirection, etc...).

getJSON is a GET call, can send key value pairs as query strings url. $.post is a POST call, cand send data as payload, and also key value pairs as query string in the url. getJSON is like $.get(url,handler,'json'), just ensures that the return is json data.

You can, though, send GET request to different domains, using something as easy as create dynamically a IMG tag.

Or you could use JSONP, but it has to be a GET call if you want to keep the current context.

Cheers.

Answer 6

Um, from the API documentation at http://api.jquery.com/jQuery.getJSON/:

"Description: Load JSON-encoded data from the server using a GET HTTP request."

So short answer is "no."