PHP returning an array to a JavaScript Ajax call

Question

I have PHP function inside a class that returns a math problem:

public function level1() {
 //level 1 and 2
 //single digit addition and subtraction
 //randomly choose addition or subtraction
 //1 = addtion, 2 - subtraction
 $opperand = rand( 1, 2 );
 //if the problem is a subtraction, the program will keep generating problems if a negative problem is generated
 //if opperand is a subtraction, do generate both numbers while the answer is negative
 if ( $opperand == 2 )
 {
 do {
 //randomly generate first number
 $number1 = rand( 1, 9 );
 //randomly generate second number
 $number2 = rand( 1, 9 );
 //compute the answer
 $answer = $number1 - $number2;
 //change variable to actual opperand
 $opperand = "-";
 } while ( $answer < 0 );
 }
 else
 {//addition problem
 //randomly generate first number
 $number1 = rand( 1, 9 );
 //randomly generate second number
 $number2 = rand( 1, 9 );
 //compute the answer
 $answer = $number1 + $number2;
 //change variable to actual opperand
 $opperand = "+";
 }//end if/else
 return array( $number1 . " " . $opperand . " " . $number2 . " ", $answer );

I call this function from ajaxHandler.php (Which I call from ajax)

 $problemData = $MathEngine->level1();
 return $problemData;

The php will always return an array, but I cannot figure out how to manipulate or even view the results as an array in javascript. Is there a way to do this? I've used the standard Get ajax call before so that's not new. when I try to reference the ajax response text as an array, I either get nothing (when i click the button) or 'undefined'

 var problemData = ajaxRequest.responseText;
 alert( problemData[0] )

• KiloJKilo: would you be able to link to an in-depth tutorial?

Answer 1

// php - this will produce a json string
echo json_encode(array( $number1 . " " . $opperand . " " . $number2 . " ", $answer ));
// and in javascript - parse json string to javascript object
var problemData = JSON.parse(ajaxRequest.responseText);

• KiloJKilo: do i echo or return the json_encode inside the ajaxHandler.php
• Tomasz Szuba: Yes, you can. You must use an "echo", "print" or anything that returns a string.

Answer 2

try to echo $problemData; instead of returning it. what is the error when you call alert( problemData[0] )? ajax does only capture string or json objects so only way to do this is to return this array as string and splitting it in js or using json_encode on that array on php side

var data = problemData.split(' ');
alert(data[0]);

• KiloJKilo: I changed return to echo, it returns "<" no quotes
• KiloJKilo: It's weird, I get < in firefox and 'undefined' in IE. If I change it to [1], I get 'b' on firefox and 'undefined' on IE. i see your edits, i'm going to try it out

Answer 3

I'd use JSON. If you've never heard of JSON before, it's just an easy way to send content back and forth between languages / platforms.

In your PHP script, add this snippet to echo your array as JSON encoded text. The response to your AJAX request will be whatever you echo.

// End of PHP script
$problemData = $MathEngine->level1();
$tmpOut = '{"bind":'. json_encode(array("problemData" => $problemData)) .'}';
echo $tmpOut;
exit;

Now in your Javascipt, decode your JSON string.

// Javascript
var jsonObj=eval("("+ajaxRequest.responseText+")");
var problemData = jsonObj.bind.problemData;

Answer 4

you can use json object to send and receive the data from javascript(AJAX) to php .use json_encode() to encode data from php and then pass it onto javascript in form of html or text . the javascript then calls json_decode to retrive the data and display.