One of the common questions I often run into from new programmers to JavaScript or PHP is how to pass values back and forth between the two. The quagmire is that JavaScript is a client side language (most of the time) and PHP is a server-side language. Once you know how the process works when someone submits some data on the front end, and how it is manipulated and returned on the back end, it is easy to see how you can exchange information between the languages.
When you visit a PHP page for the first time (or any website that has a server-side language generating its pages) your browser first requests a page from the server. The server in turn takes the request, calls PHP to build the page and manipulate variables, then returns the results back to the user in the form of HTML, a string, XML, JavaScript and more.
With the first request you typically don’t have any immediate data you are sending back through JavaScript. So PHP returns some JavaScript that is pretty standard and generic like handling form validation or perhaps some basic functions. When PHP prints the results it can also stick in values that it has for variables. For instance it may print out the message “Hello World” which is contained in the variable $hello.
echo "Just wanted to say $hello";
Keep this part in the back of your mind for a second as we will return to the idea of this variable in a second.
On the JavaScript side the way you typically pass a value from JavaScript to PHP is through the request. Either the URL as a parameter (which PHP will see come in through the array $_GET) or through a post request (like when someone submits a login form and PHP will see it come in through the array $_POST).
Now you may build this URL dynamically through JavaScript and send it to the server through either an AJAX call (like jQuery’s .ajax method) or through something like a JavaScript window.location.href = URL; type of mechanism. In that URL you would have the data you want to send to PHP. Below is an example of a JavaScript function which might be called on the pressing of a button…
function sayHelloWorld() {
var hello = "hello";
var world = "world";
window.location.href = "somepage.php?w1=" + hello + "&w2=" + world;
}
In this function above we have two JavaScript variables which are concatenating into a URL. We then tell the window to go to this PHP page with the two parameters “w1” and “w2” which holds the data. Here we are essentially passing two variables from JavaScript to PHP. The browser would then go to the URL http://www.somedomainname.com/somepage.php?w1=hello&w2=world.
Now that JavaScript has issued the request, and passed some parameters, PHP can see the data coming in through its $_GET array and use it to build our PHP from earlier “$hello”. Now again since we did this through the passing of parameters in a URL, PHP is going to see them as $_GET. If we had stuck these values in some form and submitted the form using JavaScript, PHP would have seen them in the $_POST array. So be mindful of the method you are using to pass the data.
With the PHP arrays we can read in the values, manipulate them as we see fit (like to build queries or fetch some sort of data) and then stick our results back into some new JavaScript which we will print to the user. Remember, PHP prints the JavaScript with the results. That is how it gives info back to JavaScript. PHP prints its results and is unaware that the request came from JavaScript. It sees the request as just any other browser request.
Below is an example of a function that we would print back to the user. Notice that the PHP function is printing a JavaScript function which it is dynamically building…
function sayHiBack() {
// Check if we have parameters w1 and w2 being passed to the script through the URL
if (isset($_GET["w1"]) && isset($_GET["w2"])) {
// Put the two words together with a space in the middle to form "hello world"
$hello = $_GET["w1"] . " " . $_GET["w2"];
// Print out some JavaScript with $hello stuck in there which will put "hello world" into the javascript.
echo "<script language='text/javascript'>function sayHiFromPHP() { alert('Just wanted to say $hello!'); }</script>";
}
}
This code would then print out the JavaScript function “sayHiFromPHP” which then other JavaScript could call as a normal function and it would print out the $hello you got from PHP. We could have also called this function on window load or some other event.
We touched on this earlier but this process can also be done with an AJAX call from JavaScript. Here the JavaScript would put together a URL with the parameters it wants to pass to PHP. Just like we did in the examples above. PHP would see the parameters again through $_GET or $_POST depending on the method you use to submit the data. It would work with the data, generate some results which it returns to the browser as if it was printing a normal page. But this time it is being returned as a result to JavaScript. Meaning that once the page returns it is going to return the HTML source code right back to the AJAX call in JavaScript. From there JavaScript can then manipulate the data as it sees fit.
This process is pretty much the same as I just described but with the AJAX call it is shortened because JavaScript is going to get the result of the PHP back directly. PHP is still unaware of JavaScript and is printing results like it would to the browser. This method is especially useful if you have your PHP printing something simple like a table or even a simple string of text.
In this article we explained the process by which JavaScript and PHP can communicate. When we first visit the page, the normal page content is printed. The user does something which triggers some data to be added to a URL or posted through a form dynamically using JavaScript. That JavaScript submits the data to PHP which sees the input coming in through the $_GET or $_POST arrays. It pulls that data out, manipulates it, constructs a response in the form of some JavaScript and sends it back to the user. The user can then execute that JavaScript.
We then briefly touched on the process by which JavaScript shortens the process using AJAX to both send the data to PHP and waits for the info to be processed and then directly receives the data back into JavaScript for further manipulation.
Once you get the process down, I recommend you play more with the AJAX method since it is often quicker and more dynamic. When you get the hang of it, AJAX will make the page seem more fluid and responsive since it doesn’t require the entire page to refresh.
Thanks again for reading and good luck with your JavaScript/PHP projects! 🙂
Update: As pointed out by one of our commenters the code in this article is meant to show you the process by which the two languages can communicate. It is up to you to make sure that you properly validate all incoming data to PHP and also to encode and properly display the JavaScript returned by PHP. DO NOT simply cut and paste into a production environment. Thanks!
