Jquery, reading JSON variables received from PHP

Question

Sorry if this is basic, but I have been dealing with figuring this out all day and have gotten to where I can do everything I need with Jquery and cakephp (not sure if cakephp matters in this or if its same as any PHP), I want to return a variable from a cakephp function to jquery, I had read about how to do it, like here:

the cakephp:

$test[ 'mytest'] = $test;
 echo json_encode($test);

and the jquery:

$.ajax({
  type: 'POST',
  url: 'http://localhost/site1/utilities/ajax_component_call_handler',
  data: {
        component_function: component_function,
        param_array: param_array
        },
        dataType: "json",
  success: function(data) {
   // how do i get back the JSON variables? 
  }
});

I just can't figure out how to get one or more variables back into usable form within jquery, I just want the variable so I can do whatever else with it, I've been looking at what I can find through searching but its not making it fully clear to me.. thanks for any advice.

Answer 1

The JSON variables are in the data variable. In your case, it'll look like this:

var data = {
    myTest: "Whatever you wrote here"
};

... so you can read it from data.myTest.

(Not sure whether it's relevant but you can remove the http://localhost/ part from the URL; AJAX does not allow cross-domain requests anyway.)

Answer 2

Your variables are in data.

$.ajax({
  type: 'POST',
  url: 'http://localhost/site1/utilities/ajax_component_call_handler',
  data: {
        component_function: component_function,
        param_array: param_array
        },
        dataType: "json",
  success: function(data) {
   // how do i get back the JSON variables? 
      var values = eval( data ); //if you 100 % trust to your sources.
  }
});

Answer 3

Basically data variable contain the json string. To parse it and convert it again to JSON, you have to do following:

$.ajax({
  type: 'POST',
  url: 'http://localhost/site1/utilities/ajax_component_call_handler',
  data: {
        component_function: component_function,
        param_array: param_array
        },
        dataType: "json",
  success: function(data) {
   json = $.parseJSON(data);
   alert(json.mytest);
  }

I haven't test it but it should work this way.

Answer 4

Note that when you specify dataType "json" or use $.getJSON (instead of $.ajax) jQuery will apply $.parseJSON automatically.

So in the "success" callback you do not need to parse the response using parseJSON again:

success: function(data) {
 alert(data.mytest);
}

Answer 5

In case of returning a JSON variable back to view files you can use javascript helper:

in your utilities controller:

function ajax_component_call_handler() {
  $this->layout = 'ajax';
  if( $this->RequestHandler->isAjax()) {
       $foobar = array('Foo' => array('Bar'));
       $this->set('data', $foobar);
  } 
}

and in your view/utilities/ajax_component_call_handler.ctp you can use:

if( isset($data) ) {
   $javascript->object($data); //converts PHP var to JSON
}

So, when you reach the stage in your function:

 success: function(data) {
   console.log(data); //it will be a JSON object.    
 }

In this case you will variable type handling separated from controllers and view logic (what if you'll need something else then JSON)...