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.