Question

I post JSON request to remote service. Everything is OK, service works fine and it response to me. But I have no data returned from remote service. How to get data from remote json service by JQuery via .post? Why this example returns the data — “null’:

<SCRIPT> 
$(function() {
    $('#zzz').click(function() {
        $('#lak').html('wait...');
        $.post(
  'http://127.0.0.1:3000/test',
  "{\"ipaddr\":\"192.168.132.58\"}",
  function(data) { alert(data); },
  "json"
        )
    });
});
</SCRIPT>

But the TCP sniffer shows me that service returns some data:

HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: application/json
X-Powered-By: Mojolicious (Perl)
Date: Thu, 02 Sep 2010 06:17:10 GMT
Content-Length: 37
Server: Mojolicious (Perl)

{"status":"OK","result":"successful"}

Solved:

<SCRIPT> 
$(function() {
    $('#clickme').click(function() {
 $.getJSON('http://domain.tld/test/?foo=bar&callback=?',
 function(jsonp) {
  $('#jsonp-example').html(jsonp.result);
 });
    });
});
</SCRIPT>

<div id="jsonp-example"><a id="clickme" href="javascript:void()">Click me</a></div>

And example of Mojolicious JSONP service:

# /test/?foo=bar&callback=smth
get '/test' => sub { 
 my $self = shift;

 my $foo  = $self->param('foo') || '';
 my $callback = $self->param('callback') || 'jsonp';
...
 my $json = $self->render(
  json => {
   'status' => 'OK',
   'result' => 'successful'
  }, 
  partial => 1);

 $self->render(data => "$callback($json)", format => 'js');
} => 'test';

Answer 1

You’e running into the same-origin policy which prevents (among other things) an XmlHttpRequest from getting data from a remote domain. Your POST will be successful, but the browser won’t allow you to get the response back.

Since you’re going to a remote domain, your best shot is to support JSONP, it works in a different way, you can’t POST so it’ll get a GET, but it will allow you to get data back. JSONP uses an entirely different method of getting the data, basically defining your callback as a name function then creating a <script> tag in the page. The remote server responds with namedFunction({ ...JSON data }), which your page runs…without needing an XmlHttpRequest.