Jquery getJSON not firing callback with valid json response

Question

I've got a server that's returning valid json objects (as validated by jsonlint.com) that look like this:

"{\"encryption\": {\"key\": \"gKV0oPJwC5CBQxmn\"}}"

My html file looks like this:

<html>
  <head>
    <title>Testing Jsonp</title>
    <script type="text/javascript" src='jquery-1.4.4.js'></script>
    <script type="text/javascript" src='app.js'></script>
  </head>
  <body>
    <input type='text' value='thing' id='target' />
    <a href='' class='init'>Click</a>
  </body>
</html>

app.js looks like this:

$(document).ready(function(){
  $('.init').click(function(event){
    $.getJSON("http://localhost:37280/sites/1/encode?callback=?", { key: $("#target").attr('value') }, function(data){
      alert('Success!');
    });
    event.preventDefault();
  });
});

When I click on "Click" the Chrome network console indicates that the request is sent, my server logs confirms that the request is received and chrome indicates it receives the above json string. But then nothing happens. I don't get the alert which leads me to believe my callback isn't executing. Any help would be greatly appreciated!

Is the response actually returning the quotes around the JSON object? They should not be there. — epascarello
– epascarello, Commented Mar 24, 2011 at 19:55
I've had the server return the string both ways, it does not appear to make a difference in the execution of the callback. — biagidp
– biagidp, Commented Mar 24, 2011 at 19:57
I noticed when I set the server to return {"encryption": {"key": "gKV0oPJwC5CBQxmn"}} instead of "{"encryption": {"key": "gKV0oPJwC5CBQxmn"}}" the Chrome console throws this error: "Uncaught SyntaxError: Unexpected token :" — biagidp
– biagidp, Commented Mar 24, 2011 at 20:16
Also added an error handler which doesn't produce any output. — biagidp
– biagidp, Commented Mar 24, 2011 at 20:22

Matthew Flaschen · Accepted Answer · 2011-03-24 21:06:59Z

3

That is not valid JSON. JSONLint seems to (newly?) claim that a raw string is valid JSON. This is not true. The JSON root must always be an array or object. RFC 4627 says:

"A JSON text is a serialized object or array."

Also, you're using JSONP, so you need to include the callback, which you haven't shown in your response.

So if the actual URL is http://localhost:37280/sites/1/encode?callback=jsonp1234

where jsonp1234 is a function name chosen by jQuery, the response must be:

jsonp1234({"encryption": {"key": "gKV0oPJwC5CBQxmn"}});

Note that this, like all JSONP, is actually JavaScript. This is how it can be cross-domain.

edited Mar 24, 2011 at 21:06

answered Mar 24, 2011 at 19:56

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

biagidp Over a year ago

Not including the callback was my mistake. Thanks so much!

Collectives™ on Stack Overflow

Jquery getJSON not firing callback with valid json response

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related