|
One of my readers recently asked how to pass an array or another variable from PHP to JavaScript.
This is a question I've seen all over the internet, and the quick and
dirty answer is that you can't... at least not directly. This is because
PHP is run on the server-side, and JavaScript is run on the client side
(except in rare, experimental cases). You cannot call a JavaScript
function, or access a JavaScript variable directly from PHP because
they run in completely different locations (among other reasons).
That said, here's what you can do to share data between PHP and JavaScript:
- Generate the JavaScript using PHP, just like you do HTML
- Use AJAX to send data from JavaScript to PHP and vice versa
Neither of these methods fully qualifies as "passing variables" like
you would when calling a function with parameters, but they do involve
sending and retrieving data, which can be created from and/or parsed
into variables for any given language.
Generate the JavaScript with PHP
<script>
var my_number = <?php echo 123; ?>;
var my_string = "<?php echo "foo"; ?>";
var my_array = <?php echo json_encode( array( "foo", "bar", "baz" ) ); ?>;
var my_object = <?php echo json_encode( array( "foo" => "bar" ) ); ?>;
</script>
The code above generates JavaScript variables using PHP. This is the
easiest way to control JavaScript using PHP. Numbers and strings are
pretty simple. For more complex variables, like arrays, the json_encode
function can help. It basically converts a PHP data structure into
JavaScript code. This use case isn't exactly what it was intended for
(more on that later), but it's quite handy in this circumstance.
The php code above will generate the following JavaScript code when executed:
<script>
var my_number = 123;
var my_string = "foo";
var my_array = [ "foo", "bar", "baz" ];
var my_object = { "foo": "bar" };
</script>
As you can see, you now have four JavaScript variables created from
data contained in your php script. All you have to do is make sure that
you convert your data into valid JavaScript code!
AJAX / Forms / Links
The other (usually better) way to share data between PHP and
JavaScript is by using HTTP Requests to send and retrieve information
from the web server. Whenever you click a link or submit a form on a
web site, a request is sent from the client to the server, and the
server sends a response back to the client. Thus, you can send data on
a request and receive data from the response. Back in the day, this was
done with links and forms only, but now we have AJAX. AJAX is not so
much a feature of JavaScript as it is a technique of using the
XMLHttpRequest object to send and retrieve data from the server.
Basically the idea is that you can send a request using JavaScript, the
server sends a response, and the response text is then handed back to
the JavaScript code. For more information on AJAX, I highly recommend
reviewing the AJAX Tutorial at w3schools.com.
Here's a sample PHP script that returns a random number between 0 and 100:
<?php echo rand(0,100); ?>
And here's some JavaScript code that makes a request to the PHP script on the web server (using the jQuery library's "get" function):
<script>
// Note: this script sample uses the jQuery library for simplification
jQuery.get( 'random.php', function ( data ) {
alert( "here's a random number: " + data );
});
</script>
The code above makes a GET request to the web server for the
random.php script, which is then executed by the server and the
response is sent from server to client. When the response is received,
the anonymous function is called and passed the response text, which in
this case is simply a random number from 0 to 100.
Note: PHP is not the only language these techniques apply to. Any
language that can be executed on the server-side applies, my personal
favorite being Perl. In addition, there are many formats for data transfer, the most notable being plain text, XML, and JSON.
|