What's the best way to pass a PHP variable to Javascript?

Question

I currently echo certain variables in hidden input fields and read them out with Javascript whenever I need them.

Me and a colleague are now thinking of generating an extra Javascript file with PHP which only contains all variables for Javascript. This way the variables already exist and there is no extra code in the HTML.

What are good ways to pass variables from PHP to Javascript? And how does our solution sound?

Answer 1

There are 3 ways you could do it:

• Echo them directly into the javascript source: <?echo "var user = '$user';";?>. Works, but it's messy.
• Pass them in via an ajax request. This is the closest you can come to native variable passing, but the downside is it takes an extra HTTP request.
• What you're doing, which is passing them by generating hidden form fields and then reading them.

Answer 2

A commonly used exchange format for JavaScript is JSON. A PHP file like this:

<?php
    $data = array("test" => "var", "intvalue" => 1);
    echo json_encode($data);
?>

then returns a JavaScript object like this:

{
    "test" : "var",
    "intvalue" : 1
}

You can directly echo it into a JavaScript variable on your page or request it via Ajax (e.g. using jQuerys getJSON).

Answer 3

I use to echo them all together at the head of the HTML. Seems clean enough for my needs :)

Answer 4

<?php
  $my_php_var = array(..... big, complex structure.....);
?>
<script type="text/javascript">
  my_js_var = <?=json_encode ($my_php_var)?>;
</script>