undefined error with ajaxcall to receive json data

Question

Hello,

my problem is that I can not solve this problem

If I call the php script, all I get is an undefined error

this is the code I use for testing AND

this is the original code from the creator that is giving me a headache

function startJsonSession(){     
    $.ajax({        url: "jsontest.php?action=startjson",       
     cache: false,     
        dataType: "json",   
         complete: function(data) {             
          username = data.username;               
        alert(username);      
      }    
    });
}

//phpscript

if ($_GET['action'] == "startjson") { startJson(); } 


    function startJson() {   

header('Content-type: application/json'); 
    $items = '';     
echo json_encode(array(          
     "username" => "bob",    
    "items" => array( "item1" => "sandwich",   
    "item2" => "applejuice"  
    )     
    )); 


 }

thanks, Richard

edited my question because:
this function returns the json data in a different way and therefore the solution presented below, does not have the same outcome.

function startChatSession() {
    $items = '';
    if (!empty($_SESSION['openChatBoxes'])) {
     foreach ($_SESSION['openChatBoxes'] as $chatbox => $void) {
      $items .= chatBoxSession($chatbox);
     }
    }


    if ($items != '') {
     $items = substr($items, 0, -1);
    }

header('Content-type: application/json');
?>
{
     "username": "<?php echo $_SESSION['username'];?>",
     "items": [
      <?php echo $items;?>
        ]
}

<?php


    exit(0);
}

Answer 1

Is username a global variable? If not you should prepend the "var" keyword.

username = data.username -> var username = data.username;

Answer 2

I recreated with your code and figured it out. The object being returned is of type XMLHttpRequest. Its got a property called responseText holding a json string with the data.

so this works..

var decodedData = eval("(" + data.responseText + ")");
              username = decodedData.username;               
                   alert(username);

A bit messy but it does the trick :-)

p.s If it helps, I figured it out using firebug in firefox and sticking a breakpoint in the js code

Edited below: Without wanting to do the eval, you could use this and it works:

$.getJSON("json.php?action=startjson",       

         function(data) {             
              username = data.username;               
                   alert(username);      
          }    
     );

Edited to show what I did with the success function:

    $.ajax({        url: "json.php?action=startjson",       
         cache: false,     
         dataType: "json",   
          success: function(data) {             

              username = data.username;               
                   alert(username);      
          }    
     });

Answer 3

also what I don't understand is that it breaks out off php mode, instead of echoing it back like it's done with xml

?>
{
     "username": "<?php echo $_SESSION['username'];?>",
     "items": [
      <?php echo $items;?>
        ]
}

<?php

is this the same as above (object array containing literal array)?

echo json_encode(array(
"username" => "bob",
"items" => $items )
));
}

Answer 4

At the end I got it working.

I installed firebug and saw that the php script was returning html headers instead off json.

All off the sudden it started working, I really would like to know what the problem was, but I can't tell you.

Anyway, thanks for sticking so long, David