Retrieving PHP variables from an AJAX form input

Question

I have a form in a PHP sending variables to a PHP file which duly inserts them into a MySQL table.

I currently have a div displaying the response from the PHP (which is anything that is printed by the PHP).

All works fine. The problem is I want to use variables that are created/updated during the PHP MySQL insert process. I.e. not only show what is printed in that PHP file, but USE those variables.

I have seen complicated use of the JSON Encoding to possibly cross this divide, but I'd love to know if that's the simplest approach. And if anyone has any good links or examples on the subject.

Answer 1

I assume that you want to be able to have multiple pieces of data sent back via AJAX to your page and manipulate those.

JSON is indeed the simplest way to do this. If you use PHP5, you can use json_encode() from the PHP side to send a complicated data type (such as an object or an array) back to the browser page. Then in the javascript, you use eval() on the data that is sent back (ex: var data = eval(response);) to parse it back into a usable complicated type in javascript.

There are tons of tutorials out there that will show you how to do this and explain it in further detail than a response here ever could.

Answer 2

Use PrototypeJS and do it like this:

Have some PHP like this

 $jsonHeader = array();  

 if($_REQUEST['param1'])  
 {  
   echo '<p>You passed ' . $_REQUEST['param1'] . '</p>';  
   $jsonHeader['status'] = 'Success';  
 }else  
 {  
   $jsonHeader['status'] = 'Failed because the request was invalid';  
 }  

 if(is_array($jsonHeader) and sizeof($jsonHeader) > 0)  
 {  
   header('X-JSON: (' . json_encode($jsonHeader) . ')');  
 }

Then make your Ajax call like this

new Ajax.Request('dostuff.php', {  
   method:  'get',  
   parameters:  {'param1':  'this is param 1'},  
   onSuccess:  function(response, jsonHeader){  
    if(jsonHeader['status'] == 'Success'){  
      //Everything is OK, do stuff  
    }else{  
      alert(jsonHeader['status']);  
    }  
   },   
   onFailure:  function(){  
     alert('Fail!');  
   }  
});

Prototype grabs the X-JSON header returned by PHP and automatically sets the jsonHeader argument of the onSuccess function to a Javascript array of the values that were originally set in PHP.

---

The above scenario is good as long as the amount of data you're returning to Javascript fits in the HTTP header.

If you need to pass back lots of data, just have PHP output the JSON encoded result rather than making it part of the header. Then you can use the evalJSON() method of the response object in your Ajax call.

Answer 3

You do not have to just show what's 'printed in that PHP file', your PHP file could print JavaScript commends back to your page. You could then, upon receiving the response, execute those commands. I like to use the eval function for this, but many people here will discourage you from doing so :)

Answer 4

Just use the "echo" function to put put PHP variables to the standard output put.

echo $myVarName;

Or, I prefer the printf(), be sure to check for HTML in the input BEFORE you output to avoid XSS issues.

Use something like this:

printf("Your input was: %s", strip_tags(%myInputVar));

Also, remember to use the %d or %f formatters when outputting number for best security.