jquery json function returning null

Question

I have a jquery script as below:

$.ajax({
   type: "GET",
   url: "http://www.site.com/v4/ajax/get_song_info.php",
   data: ({id : song_id }),
   dataType: "json",
   success: function(data)
   {
      alert( "Data: " + data );
   }
 });

And the associated php page:

<?php

    include_once '../connect.php';

    $song_id = $_GET['id'];

    $query = mysql_query("SELECT * FROM songs WHERE id = '$song_id' LIMIT 1");

    $song = mysql_fetch_row($query);

    $song_info = array( htmlentities($song[3]) , htmlentities($song[4]) );

    header('Content-Type: application/json');
    echo json_encode($song_info); 
?>

The php returns something like this when I call it on its own in a browser: ["Peaches","I Feel Cream (Proxy Remix)"]

However when I make the jQuery call my alert shows 'Data: null'

T.J. Crowder · Accepted Answer · 2010-06-14 06:59:10Z

1

I notice that you've used an absolute URL rather than a relative one. If your page isn't also being served from http://www.site.com, you're running into the Same Origin Policy. The SOP is a security mechanism implemented by browsers.

You have a couple of options for working around this. If you're in control of the server and you don't need to support IE6 or IE7, you can implement Cross-Origin Resource Sharing. In most modern browsers, if the server is CORS-enabled, your ajax calls will just start working (the browser handles it under-the-covers). IE6 and IE7 don't have any support for CORS, though, and IE8's requires that the client-side code do something special.

Another option is JSONP, which makes use of the fact that although you can't do a cross-origin ajax call (unless you have CORS), it's perfectly okay for a page to load a script from a remote host. So you load the script, which includes the data and which calls you back to let you know it's there. The advantage of JSONP is that it works with all major browsers, right now. And jQuery has JSONP support built into its ajax call.

edited Jun 14, 2010 at 6:59

answered Jun 14, 2010 at 6:47

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

8 Comments

Gumbo Over a year ago

That JSON data is valid: “A JSON text is a serialized object or array.” (See tools.ietf.org/rfcmarkup/4627#section-2)

T.J. Crowder Over a year ago

@Gumbo: Thanks for that. My read of json.org originally suggested that the top level always had to be an object, not an array. I just went back and it's not clear (at json.org). But you're right about the IETF document, that's very clear. Thanks for the correction and the link!

ian Over a year ago

So how come json_encode doesn't return valid json.... I changed my code to: echo '{ "song_info":'. json_encode($song_info).'}'; and now get the response. Data: [object Object] wich I guess is good? The pages are on the same web site so that isn't a problem but good to know. If I now have the data returned correctly [object Object] ? How do I access each part?

T.J. Crowder Over a year ago

@ian: json_encode is probably happy to encode portions rather than a whole. But Gumbo pointed to an IETF document that suggests that starting with a top-level array is valid. Still, if changing it worked, great. You access your array as data.song_info.

ian Over a year ago

I changed the URL to a relative URL ajax/get_song_info.php and left the json_encode(); the same and it now seems to work. I get a response of: Data: Johnny Cash,God's Gonna Cut You Down (Mondkopf Plus de Sommeil Remix) Or whatever it is... Thanks!

|

Collectives™ on Stack Overflow

jquery json function returning null

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related