$ .ajax回调函数无法正常工作

Question

I am just starting to learn JSON where a tutorial from other site uses this code (which I already modified to simplify this):

$(document).ready(function(){
    $('#getdata-button').click(function(){
        $.ajax({
            type: "GET",
            url: "json-data.php",
            dataType: "json",
            success: function(){
                alert('a');
                $('#showdata').html(
                    "<p>item1="+data.item1+
                    " item2="+data.item2+
                    " item3="+data.item3+"</p>"
                );
            }
        });
    });
});

And this is the code for json-data.php

<?php
    $item1 = "candy";
    $item2 = "chocolate";
    $item3 = "ice cream";

    //return in JSON format
    echo "{";
    echo "item1: ", json_encode($item1), "\n";
    echo "item2: ", json_encode($item2), "\n";
    echo "item3: ", json_encode($item3), "\n";
    echo "}";
?>

The problem is that alert function (for debugging purposes) isn't responding after I have clicked the button (with the id of "getdata-button"). Firebug says that the request is successful and I can see the data from there. No error was found. It is just the callback function is not executing, but why?

Answer 1

You need to output your JSON correctly. Replace your PHP with the below

$items = array(
    'item1' => $item1,
    'item2' => $item2,
    'item3' => $item3
);
header('Content-type: application/json');
echo json_encode($items);