How can I access my PHP variables when calling ajax in jQuery?

Question

I am attempting to create a simple comment reply to posts on a forum using the AJAX function in jQuery. The code is as follows:

$.ajax({type:"POST", url:"./pages/submit.php", data:"comment="+ textarea +"& thread="+ currentId, cache:false, timeout:10000,
        success: function(msg) {
                // Request has been successfully submitted
                alert("Success " + msg);
        },
        error: function(msg) {
                // An error occurred, do something about it
                alert("Failed " + msg);
        },
        complete: function() {
                // We're all done so do any cleaning up - turn off spinner animation etc.
                // alert("Complete");
        }
    });

Inside the submit.php file I have this simple if->then:

    if(System::$LoggedIn == true)
{
    echo "Yes";
} else {
    echo "No";
}

This call works on all other pages I use on the site, but I cannot access any of my variables via the AJAX function. I've tested everything more than once and I can echo back whatever, but anytime I try to access my other PHP variables or functions I just get this error:

Failed [object XMLHttpRequest]

Why am I unable to access my other functions/variables? I must submit the data sent into a database inside submit.php using my already made $mySQL variable, for example. Again these functions/variables can be accessed anywhere else except when I call it using this AJAX function. After hours of Googling I'm just spent. Can anyone shed some light on this for me? Many thanks.

Answer 1

First thing, you have a space in the Data Parameter String for the URL - will cause problems.

Secondly, your success and error functions are referencing a variable msg. It seems you are expecting that variable to be a string. So, the question then becomes - What is the format of the output your PHP script at submit.php is producing?

A quick read of the jQuery API suggests that, if the format of the response is just text, the content should be accessible using the .responseText property of the response. This is also inline with the response you say you are getting which states "Failed [object XMLHttpRequest]" (as you are trying to turn an XHR into a String when using it in an alert.

Try this:

$.ajax( {
  type: "POST" ,
  url: "./pages/submit.php" ,
  data: "comment="+ textarea +"&thread="+ currentId ,
  cache: false ,
  timeout: 10000 ,
  success: function( msg ) {
   // Request has been successfully submitted
    alert( "Success " + msg.responseText );
  } ,
  error: function( msg ) {
   // An error occurred, do something about it
    alert( "Failed " + msg.responseText );
  } ,
  complete: function() {
   // We're all done so do any cleaning up - turn off spinner animation etc.
    // alert( "Complete" );
  }
} );

Answer 2

The PHP script that you have only returns a single variable. Write another script that that returns JSON or if you are feeling brave XML. below is a quick example using JSON.

In your javascript

$.ajax({
    type: 'GET'
    ,url: '../pages/my_vars.php'
    ,dataType: 'json'
    ,success: function(data){
        // or console.log(data) if you have FireBug
        alert(data.foo);
    }
});

Then in the php script.

// make an array or stdClass 
$array = array(
    'foo'  => 'I am a php variable'
    ,'bar' => '... So am I'
);

// Encodes the array into JSON
echo json_encode($array);