jQuery does not return a JSON object to Firebug when JSON is generated by PHP

Question

The contents of test.json are:

{"foo": "The quick brown fox jumps over the lazy dog.","bar": "ABCDEFG","baz": [52, 97]}

When I use the following jQuery.ajax() call to process the static JSON inside test.json,

$.ajax({
    url: 'test.json',
    dataType: 'json',
    data: '',
    success: function(data) {
        $('.result').html('<p>' + data.foo + '</p>' + '<p>' + data.baz[1] + '</p>');
    }
});

I get a JSON object that I can browse in Firebug.

However, when using the same ajax call with the URL pointing instead to this php script:

<?php
    $arrCoords = array('foo'=>'The quick brown fox jumps over the lazy dog.','bar'=>'ABCDEFG','baz'=>array(52,97));
    echo json_encode($arrCoords);
?>

which prints this identical JSON object:

{"foo":"The quick brown fox jumps over the lazy dog.","bar":"ABCDEFG","baz":[52,97]}

I get the proper output in the browser but Firebug only reveals only HTML. There is no JSON tab present when I expand GET request in Firebug.

Answer 1

Try

<?php
    header('Content-type: application/json');
    $arrCoords = array('foo'=>'The quick brown fox jumps over the lazy dog.','bar'=>'ABCDEFG','baz'=>array(52,97));
    echo json_encode($arrCoords);
?>

Answer 2

You need to set the content-type header most likely:

// this is the "offical" content-type
header('Content-Type: application/json');
// or - this will probably work too
header('Content-Type: text/javascript');