Why JQuery's .post returns no data?

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&amp;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

The returned data from the post is used by jquery to determine if the request was successful or not. If it's not the case, an exception will be raised.

Answer 2

Doesn't seem to be anything wrong with your client side code jsFiddle, however, you probably want to change "{\"ipaddr\":\"192.168.132.58\"}" to {ipaddr:"192.168.132.58"} since that would be the same as sending a form with a field named ipaddr with the value 192.168.132.58, your own option was sending a field named {"ipaddr":"192.168.132.58"} with the empty value.

Good luck.

Answer 3

Try and check your server side output for random whitespace, depending on browser that might mess up parsing.

Answer 4

"As far as what they're meant for - the only real technical difference (please correct this post if I'm wrong) is that GET has a much shorter limit to the query string. In practice, GET is meant for when fetching something from the server. A GET call should not cause side effects on the server. POST is when you intend to send something on the server and have it do something with it." (http://stackoverflow.com/questions/2375097/difference-between-jquery-post-and-jquery-get)

Have u tried $.get()? It should be faster and is more used to return data from server... Here is some documentation: http://api.jquery.com/jQuery.get/

Answer 5

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.