Question

We have published a json api to share data between a few domains. We provide a callback that allows any GETs from remote sites to be returned as padded json.

GET http://mysite.com/jsonapi/object?callback=?

Returns: ?({‘someKey’:’someData’})

Now all of this works fine whenever we are GET’ting data from remote sites, but the moment that I attempt to do a remote jquery POST to the api to fetch json data, I get a null return in Firefox. I can post a form from a remote site to the json API without any problem and get back json data. The problem only arises with jquery POSTs. I imagine that this is some sort of protection against cross-site scripting that I don’t completely understand. When I jquery POST data to a url on the same site that I download the jquery POSTing page from, I don’t have the issue.

How do I do a jquery post to a remote site and process the json data that I get back? I can add a call back or make some other type of modification to the json data being returned and I’m not worried about security. I just want to be able to jquery post a form rather than pass the parameters as a GET.

How would I modify this to jquery POST to a remote site?

<form method="post" action="http://www.remoteSite.com" name="input">
        Quick form to test update public data:<br>
        New data:<input type="text" value="New Data" name="newData"><br>
        <input type="submit" value="Submit">
</form>

<script src="_js/jquery-1.4.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$("form").submit(function(e){
    var form = $(this);
    $.ajax({ 
         url   : form.attr('action'),
         method: form.attr('method'),
         data  : form.serialize(), // data to be submitted
         success: function(response){
            alert(response); // do what you like with the response
         }
    });
    return false;
 });
</script>

This currently returns [JavaScript Application] as the alert rather than the expected json return data.

Answer 1

The same-origin policy kicks in when you attempt to post through javascript, obvious reasons behind this include posting potentially sensitive information without the user knowing (via ajax). Jquery does support JSONP, this technique allows sending data to a site outside of your domain, and it does so by creating a element dynamically on your page, which wraps the response in a function call. The thing to note here though, is that you can’t do a POST with a element as its requested through GET.

$.ajax({
     url   : form.attr('action'),
     method: form.attr('method'),
     data  : form.serialize(), // data to be submitted
     success: function(response){
        alert(response); // do what you like with the response
     },
     dataType: 'jsonp'
});