By Madara Uchiha


2014-05-19 14:37:56 8 Comments

I have a variable in PHP, and I need its value in my JavaScript code. How can I get my variable from PHP to JavaScript?

I have code that looks like this:

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

I have JavaScript code that needs val and looks along the lines of:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>

20 comments

@Marco Concas 2019-11-30 16:02:43

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (yourexternal.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

OUTPUT

The apple color is yellow, the strawberry color is red and the kiwi color is green.

@antelove 2019-08-14 16:37:53

<?php

    $val = $myService->getValue(); // Makes an API and database call

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

@aequalsb 2015-05-18 20:12:58

Here is one I do not see posted as an option. It is similar to using Ajax, but clearly different.

First, set a script's source directly to a PHP file.

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

You could even pass a variable back to the PHP file such as this example:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

Then in "your_php_file.php":

<?php
    // THIS IS A SIMPLE EXAMPLE
    // it demonstrates one method of using the src attribute to link
    // to a PHP file which can generate JavaScript code dynamically
    // and share data between PHP and JavaScript
    // you may take this learning example and develop it further
    // relying on your own coding skills for validating data
    // and avoiding errors, of course
    header('content-type: text/javascript');

    // If you pass a $_GET variable from the JavaScript
    // you should add code to validate your $_GET variable(s)

    // You can add code to query a database
    // using $_GET['var1'] or some other criteria

    // You can add simple variable assignments
    $value = 'some value';

    // For the OP's needs (assumes the class object has been defined)
    $val = $myService->getValue();
?>

function name() {
    // Pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both PHP and JavaScript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = <?php echo '"' . $val . '"'; ?>;
    var example2 = <?php echo '"' . $value . '"'; ?>;
    var example3 = <?php echo '"some other data"'; ?>;
    alert( example1 + ' / ' + example2 );
}

<?php
    // You may even want to include additional files (.php or .js, etc.)
    @include 'local_path_to_some_other_js_file.js';
    @include 'local_path_to_some_other_php_file.php';

    exit;
?>

@Quentin 2015-08-19 14:18:38

Since the variable exists in the PHP script which is generating the HTML, you missed the important step of dynamically generating var1=value1. As it stands your script is going to break if the data includes a ' character.

@aequalsb 2015-08-20 15:50:29

@Quentin the code EXAMPLE works without error as presented. it is to demonstrate usage. if a programmer is this far into coding, they will understand the implications of single-quotes/double-quotes in $_GET variables -- which should be urlencoded anyway. var1 != [some HTML code]... CLEARLY var1=="value1". plainly put, you are wrong that i missed anything. the EXAMPLE script is complete, and, as you can see, is not generating any HTML whatsoever -- and the OP did not mention HTML. it does not deserve a downvote by some trigger happy bypasser -- retract downvote

@Quentin 2015-08-20 16:07:55

The code in the question demonstrates that the OP does not understand quoting / escaping. The lack of understanding about that is the entire problem! While the example is complete, it isn't an example of how to solve the problem expressed in the question.

@aequalsb 2015-08-20 16:11:46

@Quentin exactly how does the OP demonstrate they do not understand quoting / escaping? it IS an example of how to solve the problem, because the OP asked how to get PHP data to a javascript -- my example is one method that was not noted in any other answers

@Quentin 2015-08-20 16:12:18

With this piece of code that does nothing to escape or encode $val and which sometimes works and sometimes does not: myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails

@aequalsb 2015-08-20 16:15:46

the OP's question is how to pass variables between -- he did not ask for details on validation or escaping. we don't need to write an entire programming tutorial to demonstrate examples of fulfilling the OP's needs or for the benefit of other readers.

@Quentin 2015-08-20 16:19:24

Validation or escaping is an essential part of dealing with the passing of data where you don't know what characters might appear in it (as is the case here).

@aequalsb 2015-08-20 16:22:42

this is an example of an option for sharing data, not a complete tutorial on coding -- that's what this entire site is for. you can't squeeze the entire site into every answer. besides, i bet you haven't even reread my answer with edits, since you're busy firing off invalid downvotes...

@Quentin 2015-08-20 16:27:23

I might be more inclined to examine the edits if you said something like "That's a good point, I've updated the answer" instead of ranting about how irrelevant it is. addslashes, FWIW, is insufficient as it doesn't escape all the characters which could break a string literal in JavaScript (new line characters being the obvious one). Any time that addslashes looks like the solution, there is probably something language specific that is a better choice. json_encode in this case (as pointed out by many other answers here).

@aequalsb 2015-08-20 16:37:46

it's NOT a good point. i posted, like many other answers, to document various methods of sharing data. the OP needs to cross the conceptual bridge FIRST -- before they address the details of validation. besides, i would be less inclined to rant (which i'm not) had you said "That's a good simple method, it would be even better if you mentioned the importance of data validation -- consider updating your answer?" instead you downvote first, and potentially block the OP from having a "eureka" moment from sifting the examples.

@aequalsb 2015-08-20 16:40:28

also, i'm not referring to $val in the $_GET variable -- it's $var1 -- because it's an example...

@user4271704 2015-11-26 10:17:59

If it doesn't need _POST _GET parameters that would not need escaping, the code is usefull if the var is a cookie or a constant without passing parameters to that php script.

@Timm 2018-10-11 23:37:31

@user4271704 – a cookie is on the user's browser, and that's just as vulnerable as a url query parameter, albeit not as easy to manipulate.

@Jonathan199 2018-08-30 08:59:28

After much research, I found the easiest method is to pass all kinds of variables easily.

In the server script, you have two variables, and you are trying to send them to the client scripts:

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

In any of your JavaScript code called on the page, simply call those variables.

@Supun Praneeth 2018-07-08 14:52:58

Let's say your variable is always integer. In that case this is easier:

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Output:

<script>var number = 4;alert(number);</script>

Let's say your variable is not an integer, but if you try above method you will get something like this:

<script>var number = abcd;alert(number);</script>

But in JavaScript this is a syntax error.

So in PHP we have a function call json_encode that encode string to a JSON object.

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Since abcd in JSON is "abcd", it looks like this:

<script>var number = "abcd";alert(number);</script>

You can use same method for arrays:

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

And your JavaScript code looks like this:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

Console output

Enter image description here

@Neo 2017-08-01 04:27:17

Use:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

and that will work. It's just assigning a JavaScript variable and then passing the value of an existing PHP variable. Since PHP writes the JavaScript lines here, it has the value of of the PHP variable and can pass it directly.

@Ramin Taghizada 2017-07-13 15:36:57

Here is is the trick:

  1. Here is your 'PHP' to use that variable:

    <?php
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
    
  2. Now you have a JavaScript variable called 'name', and here is your JavaScript code to use that variable:

    <script>
         console.log("I am everywhere " + name);
    </script>
    

@William Howley 2017-08-12 18:06:32

Is there any way to get it so that it doesnt actually print into the source code? I have a massive array that I am passing, and it clogs up the source.

@Ramin Taghizada 2017-08-15 13:22:18

Can you provide an example test case ?

@kanji 2018-02-12 12:04:38

Isn't this same as "3. Echo the data directly to JavaScript" in this answer? That one looks even better.

@Pedro Gimeno 2016-06-05 17:44:44

I'll assume that the data to transmit is a string.

As other commenters have stated, AJAX is one possible solution, but the cons outweigh the pros: it has a latency and it is harder to program (it needs the code to retrieve the value both server- and client-side), when a simpler escaping function should suffice.

So, we're back to escaping. json_encode($string) works if you encode the source string as UTF-8 first in case it is not already, because json_encode requires UTF-8 data. If the string is in ISO-8859-1 then you can simply use json_encode(utf8_encode($string)); otherwise you can always use iconv to do the conversion first.

But there's a big gotcha. If you're using it in events, you need to run htmlspecialchars() on the result in order to make it correct code. And then you have to either be careful to use double quotes to enclose the event, or always add ENT_QUOTES to htmlspecialchars. For example:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

However, you can't use htmlspecialchars on regular JavaScript code (code enclosed in <script>...</script> tags). That makes use of this function prone to mistakes, by forgetting to htmlspecialchars the result when writing event code.

It's possible to write a function that does not have that problem, and can be used both in events and in regular JavaScript code, as long as you enclose your events always in single quotes, or always in double quotes. Here is my proposal, requiring them to be in double quotes (which I prefer):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

The function requires PHP 5.4+. Example usage:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

@Tapasit Suesasiton 2015-12-21 16:39:54

For those who have some problem using below code and it keep showing <?php echo $username?> or something like this, go edit the httpd.conf in the mime_module section by add this 'AddType application/x-httpd-php .html .htm' because it may be disabled by default.

<?php
    $username = 1;
?>

<script type="text/javascript">
    var myData = <?php echo $username ?>;
    console.log(myData);
    alert(myData);
</script>

@Nikita 웃 2016-01-02 17:17:50

@MadaraUchiha can you explain why?

@Madara Uchiha 2016-01-02 17:43:27

Because if $username === "hello", then you have var myData = hello; which will break horribly.

@Amit Shah 2015-04-15 11:14:04

As per your code

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

Now you can get value using DOM, use innerHTML of span id, in this case you don't need to do any call to server, or Ajax or another thing.

Your page will print it using PHP, and you JavaScript will get value using DOM.

@Michał Perłakowski 2017-04-18 10:26:43

This code is vulnerable to XSS, because it doesn't escape characters like < and >. Also, similar solutions have already been suggested.

@qnimate 2015-01-19 15:04:02

I have come out with an easy method to assign JavaScript variables using PHP.

It uses HTML5 data attributes to store PHP variables and then it's assigned to JavaScript on page load.

A complete tutorial can be found here.

Example:

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

Here is the JavaScript code

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

@Quentin 2015-08-19 14:22:47

While data attributes are a reasonable solution to the problem, you end up with a similar problem to the original question if you don't escape the data in them. It's just you need to escape them for HTML instead of JS.

@Danijel 2014-10-29 20:24:58

I quite like the way the WordPress works with its enqueue and localize functions, so following that model, I wrote a simple class for putting a scripts into page according to the script dependencies, and for making additional data available for the script.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

The call to the enqueue_script() function is for adding script, setting the source and dependencies on other scripts, and additional data needed for the script.

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

And, print_scripts() method of the above example will send this output:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

Regardless the fact that the script 'jquery' is enqueued after the 'jquery-ui', it is printed before because it is defined in 'jquery-ui' that it depends on 'jquery'. Additional data for the 'custom-script' are inside a new script block and are placed in front of it, it contains mydata object that holds additional data, now available to 'custom-script'.

@user1033882 2019-09-19 10:30:13

That is awesome. Thanks for this solution....I think by far it's the best solution in the whole page

@Yosra Nagati 2014-09-02 10:04:57

Try this:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

--

-After trying this for a while

Although it works, however it slows down the performance. As PHP is a server-side script while JavaScript is a user side.

@Madara Uchiha 2014-09-02 10:09:26

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed. This is written on the question.

@Yosra Nagati 2014-09-02 10:42:52

nothing much to explain write down your php variable in a <script tag> which is echoed in php code

@Madara Uchiha 2014-09-02 10:43:29

Are you sure? Have you seen the top answer to this question? It explains quite a bit. Not to mention that your solution is not secure. $phpVariable = '42"; alert("I am evil!");';

@Yosra Nagati 2014-09-02 10:49:26

this is my suggestion which solved my problem and i do not find it in the previous answers so i added , in hope some one find it interesting

@SUMIT KUMAR SINGH 2015-04-11 08:20:08

is echo added here to print it on web page having this php code in it or is it just the part of syntax to put data into js [email protected]

@Yosra Nagati 2015-04-14 12:47:09

it is here to enable javascript to access it

@yuikonnu 2014-05-22 17:14:25

I usually use data-* attributes in HTML.

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Service variable now contains the value of $myService->getValue();
        });
    });
</script>

This example uses jQuery, but it can be adapted for another library or vanilla JavaScript.

You can read more about the dataset property here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

@Eckstein 2014-07-13 03:39:36

This answer actually seems the simplest to me for most people's purposes. You've earned an upvote!

@alds 2014-07-30 16:32:18

I agree, not wanting to over-analyze and implement a fancy solution for a simple problem. This method separates PHP from Javascript, so that PHP still generates the HTML only, while Javascript can be external to the PHP file.

@Ryan 2015-04-14 02:26:33

I agree this is the best option. It solves all the security issues, without the latency. You can keep JS entirely out of your HTML pages. HTML needs to be served by the application server, but JS (and CSS) does not. It's also more semantic.

@Quentin 2015-08-19 14:23:15

This will break if the data includes " characters. You need to escape data for HTML before dumping it into an attribute value.

@yuikonnu 2015-10-28 23:57:18

@Quentin You should escape ALL output, unless the output is HTML itself.

@Quentin 2015-10-28 23:59:14

@asdasd — Well yes, I was just addressing the specific problem with the code in your answer rather than the general case.

@wp-overwatch.com 2016-12-16 00:34:34

If the data echoed by PHP can be manipulated by the user, you'll need to use the htmlspecialchars() function to make sure the HTML is valid. Take the scenario where $myService->getValue() returns the malicous string "> <script>...Enter JavaScript that watches for the user to input credit card info or passwords on the site</script>

@kanji 2018-02-12 13:13:27

This looks the best solution to me, like other people are saying in their comments. Now is there any difference or preference to use other tags like script or meta this way, instead of div? I wonder if there is any best practice for this kind of tag usage.

@Timm 2018-10-11 23:09:58

@kanji – there's no best practice; div is fine, but you can use any tag you like; has to be in the body though.

@Timm 2018-10-11 23:58:46

Just remember to hide the service container: <div class="service-container" data-service="..." style="display:none;"><\div>.

@Saurabh Chandra Patel 2019-05-25 18:45:26

One of the best solution but of course not only the solution

@andrew 2014-05-19 15:20:46

myPlugin.start($val); // Tried this, didn't work

It doesn't work because $val is undefined as far as JavaScript is concerned, i.e. the PHP code did not output anything for $val. Try viewing the source in your browser and here is what you'll see:

myPlugin.start(); // I tried this, and it didn't work

And

<?php myPlugin.start($val); ?> // This didn't work either

This doesn't work because PHP will try to treat myPlugin as a constant and when that fails it will try to treat it as the string 'myPlugin' which it will try to concatenate with the output of the PHP function start() and since that is undefined it will produce a fatal error.

And

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

While this is most likely to work, since the PHP code is producing valid JavaScript with the expected arguments, if it fails, chances are it's because myPlugin isn't ready yet. Check your order of execution.

Also you should note that the PHP code output is insecure and should be filtered with json_encode().

EDIT

Because I didn't notice the missing parenthesis in myPlugin.start(<?=$val?> :-\

As @Second Rikudo points out, for it to work correctly $val would need to contain the closing parenthesis, for example: $val="42);"

Meaning that the PHP will now produce myPlugin.start(42); and will work as expected when executed by the JavaScript code.

@kingprawn 2015-01-30 08:57:48

JSON encode your data: myPlugin.start(<?=json_encode($val)?>);

@Benjamin Gruenbaum 2014-05-19 15:02:59

I'm going to try a simpler answer:

Explanation of the problem

First, let's understand the flow of events when a page is served from our server:

  • First PHP is run, it generates the HTML that is served to the client.
  • Then, the HTML is delivered to the client, after PHP is done with it, I'd like to emphasize that once the code leaves the server - PHP is done with it and can no longer access it.
  • Then, the HTML with JavaScript reaches the client, which can execute JavaScript on that HTML.

So really, the core thing to remember here is that HTTP is stateless. Once a request left the server, the server can not touch it. So, that leaves our options to:

  1. Send more requests from the client after the initial request is done.
  2. Encode what the server had to say in the initial request.

Solutions

That's the core question you should be asking yourself is:

Am I writing a website or an application?

Websites are mainly page based, and the page load times needs to be as fast as possible (for example - Wikipedia). Web applications are more AJAX heavy and perform a lot of round trips to get the client fast information (for example - a stock dashboard).

Website

Sending more requests from the client after the initial request is done is slow as it requires more HTTP requests which have significant overhead. Moreover, it requires asynchronousity as making an AJAX request requires a handler for when it's complete.

I would not recommend making another request unless your site is an application for getting that information from the server.

You want fast response times which have a huge impact on conversion and load times. Making Ajax requests is slow for the initial uptime in this case and unneeded.

You have two ways to tackle the issue

  • Set a cookie - cookies are headers sent in HTTP requests that both the server and client can read.
  • Encode the variable as JSON - JSON looks very close to JavaScript objects and most JSON objects are valid JavaScript variables.

Setting a cookie is really not very difficult, you just assign it a value:

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

Then, you can read it with JavaScript using document.cookie:

Here is a short hand rolled parser, but the answer I linked to right above this has better tested ones:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

Cookies are good for a little data. This is what tracking services often do.

Once we have more data, we can encode it with JSON inside a JavaScript variable instead:

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

Assuming $value is json_encodeable on the PHP side (it usually is). This technique is what Stack Overflow does with its chat for example (only using .NET instead of PHP).

Application

If you're writing an application - suddenly the initial load time isn't always as important as the ongoing performance of the application, and it starts to pay off to load data and code separately.

My answer here explains how to load data using AJAX in JavaScript:

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

Or with jQuery:

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

Now, the server just needs to contain a /your/url route/file that contains code that grabs the data and does something with it, in your case:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

This way, our JavaScript file asks for the data and shows it rather than asking for code or for layout. This is cleaner and starts to pay off as the application gets higher. It's also better separation of concerns and it allows testing the client side code without any server side technology involved which is another plus.

Postscript: You have to be very aware of XSS attack vectors when you inject anything from PHP to JavaScript. It's very hard to escape values properly and it's context sensitive. If you're unsure how to deal with XSS, or unaware of it - please read this OWASP article, this one and this question.

@cHao 2014-05-20 01:47:19

Nitpick: There is no such thing as a "JSON object" (aside from the one that has the parse and stringify methods). JSON is by definition a sequence of characters.

@Benjamin Gruenbaum 2014-05-20 03:12:11

@cHao more generally - encodings are defined as a sequence of characters and the existence of conceptual objects is a philosophical one. However, there are such things as JSON objects and they are defined by the JSON grammar. {} is a valid JSON object - see json.org

@cHao 2014-05-20 05:21:52

If you're using that definition, though, then all "JSON objects" are valid in JS.

@Benjamin Gruenbaum 2014-05-20 06:02:33

@cHao note the subtlety: JavaScript has its notion of object and JSON has its notion of object - they are not the same. When people misuse the term "JSON object" they mean a JS object, where in JavaScript land - JSON is used as a data serialization format and JSON objects appear inside strings (kind of like SQL queries in server-side languages). However, in this answer the JSON method relies on the fact that most JSON objects are also valid JavaScript object so we write a JSON object into JavaScript code.

@cHao 2014-05-20 13:42:57

JSON is a strict subset of JS's syntax for literals. If it's valid JSON as text, then by definition, it's already valid JS when echoed as code.

@Benjamin Gruenbaum 2014-05-20 13:43:55

@cHao JSON is really not a strict subset of JS's syntax for literals, however - yes, that's the trick :)

@cHao 2014-05-20 14:45:01

OK, you need to show off this valid JSON that would be invalid JS. Cause i certainly haven't seen it.

@Benjamin Gruenbaum 2014-05-20 14:45:51

@cHao Ah, but I've foreseen this moment yesterday :) stackoverflow.com/questions/23752156/…

@cHao 2014-05-20 15:02:08

OK, you got me there. :) It's still safe, though; PHP's default behavior is to escape such characters (along with other non-ASCII chars), so they never make their way into the output except as \u2028 etc. You'd have to explicitly tell it not to do that.

@avi 2014-06-28 11:38:59

why I have to sanitize the data? I am sending it from server and I am fully aware what it is, then why sanitize?

@cHao 2014-08-14 23:18:02

@avi: Trusting incoming data means putting huge amounts of faith in its source. And by "source", i don't mean just your server's ajax handler script -- i also mean the code that stored the data being used, and any user that might have input data that's being used, and (unless you're using HTTPS) even the routers between the user and your server that forward the data along. If you can prove that there is absolutely no way injection can occur, sanitizing might be overkill. But that level of certainty is pretty rare.

@Madara Uchiha 2014-05-19 14:37:56

There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.

In no particular order:

  1. Use AJAX to get the data you need from the server.
  2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
  3. Echo the data directly to JavaScript.

In this post, we'll examine each of the above methods, and see the pros and cons of each, as well as how to implement them.

1. Use AJAX to get the data you need from the server

This method is considered the best, because your server side and client side scripts are completely separate.

Pros

  • Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code.
  • More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages.
  • Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever.
  • Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.

Cons

  • Latency - AJAX creates an HTTP request, and HTTP requests are carried over network and have network latencies.
  • State - Data fetched via a separate HTTP request won't include any information from the HTTP request that fetched the HTML document. You may need this information (e.g., if the HTML document is generated in response to a form submission) and, if you do, will have to transfer it across somehow. If you have ruled out embedding the data in the page (which you have if you are using this technique) then that limits you to cookies/sessions which may be subject to race conditions.

Implementation Example

With AJAX, you need two pages, one is where PHP generates the output, and the second is where JavaScript gets that output:

get-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to echo the result.
                      // All data should be json_encode()d.

                      // You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (or whatever the actual page is named like)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

The above combination of the two files will alert 42 when the file finishes loading.

Some more reading material

2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM

This method is less preferable to AJAX, but it still has its advantages. It's still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript.

Pros

  • Fast - DOM operations are often quick, and you can store and access a lot of data relatively quickly.

Cons

  • Potentially Unsemantic Markup - Usually, what happens is that you use some sort of <input type=hidden> to store the information, because it's easier to get the information out of inputNode.value, but doing so means that you have a meaningless element in your HTML. HTML has the <meta> element for data about the document, and HTML 5 introduces data-* attributes for data specifically for reading with JavaScript that can be associated with particular elements.
  • Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source.
  • Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself.
  • Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.

Implementation Example

With this, the idea is to create some sort of element which will not be displayed to the user, but is visible to JavaScript.

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3. Echo the data directly to JavaScript

This is probably the easiest to understand.

Pros

  • Very easily implemented - It takes very little to implement this, and understand.
  • Does not dirty source - Variables are outputted directly to JavaScript, so the DOM is not affected.

Cons

  • Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.

Implementation Example

Implementation is relatively straightforward:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

Good luck!

@Quentin 2014-05-19 14:43:06

"PHP has no trivial JavaScript escape functions" — What is wrong with json_encode?

@el.pescado 2014-05-19 14:44:20

I disagree with "Highly insecure!!" and "Structured data is hard". Encode data as JSON (JavaScript Object Notation, after all), and there you go!

@Benjamin Gruenbaum 2014-05-19 14:44:20

What about the significant overhead and code complexity asynchronousity introduces when making an AJAX request? When working on a JavaScript light website - making an AJAX request is tedious and not best practices.

@Benjamin Gruenbaum 2014-05-19 14:44:44

@el.pescado a lot of JS objects are invalid JSON and vice versa, although I agree that for the average case json encoding works.

@Quentin 2014-05-19 14:45:35

@BenjaminGruenbaum — JS being invalid JSON is irrelevant. I can't think of any JSON that is invalid in JavaScript on the right hand side of an assignment.

@Benjamin Gruenbaum 2014-05-19 14:45:54

The beautiful world of encoding.

@Brian S 2014-05-19 16:13:34

What's your opinion of using some kind of templating system which doesn't necessarily depend on PHP? For example, <script>var data = {my_variable};</script> in your template, and $my_template->bind('my_variable', 42); $my_template->display(); in your PHP. Later, you decide to switch to say C# and get a C# library for your particular template system, and nothing in the template is altered. Now your codebehind reads myTemplate.Bind("my_variable", 42); myTemplate.Display();

@Madara Uchiha 2014-05-19 16:15:11

It's not much different from approach 3 except it's not as flexible. @Brian

@Brian S 2014-05-19 16:24:18

Could you elaborate? Assuming you have a robust template engine with available libraries in multiple languages, I don't think any of the cons you've listed in #3 apply. (Admittedly, I'm not aware of a good engine available in multiple languages in the real world, but speaking theoretically.) I can see "less flexible," as you would be limited to the template engine's capabilities, rather than a full-featured language... but that can also help you avoid traps of business logic in your presentation. Of course user input could be a problem, but sanitizing user input is always a problem.

@Benjamin Gruenbaum 2014-05-19 16:43:05

@BrianS just a side note - if your run PHP in .net and then access it via C# if you want.

@Pang 2014-05-21 02:18:15

@SecondRikudo In method 2, in the example, the data is printed into the node value of an HTML text node. Problems are: (i.) whitespaces and newlines could be messed up (at least that's what jQuery says about .text()) (may be undesirable). (ii.) Search engines would think that it is content and display it in SERPs (may be undesirable). Not sure if printing the data into HTML node attributes (e.g. HTML5 data-*) can solve (i.), but it can definitely solve (ii.).

@Pang 2014-05-21 02:19:05

@SecondRikudo Anyway I suggest you to break method 2 into 2a (use text node value) and 2b (use node attribute) and list all pros & cons (unless one is definitely better than the other).

@Pang 2014-05-21 02:23:48

@SecondRikudo In method 3, that example can kill the website. Example: <?php $output = '<!--<script>'; echo json_encode($output); ?>. See this question for details. Solution: Use JSON_HEX_TAG to escape < and > (requires PHP 5.3.0).

@Pang 2014-05-22 01:03:43

@SecondRikudo One more "con" you can add. For method 1, the search engines won't see the data because they don't execute Javascript (mostly), so if content is presented from those data, your web page is going to appear to have less content to search engines than to Javascript-enabled browsers. Same goes for method 3, because the data is within in the Javascript tags. For method 2, the data may look garbled, but they are at least visible to search engines.

@Madara Uchiha 2014-05-22 06:01:58

Google executes JavaScript. So that argument had little merit. @Pang

@Ryan 2015-04-14 02:24:45

I think this answer is sufficiently biased that it is actually misleading.

@Madara Uchiha 2015-04-14 07:07:39

@Ryan Well, it's hard to find out what's wrong with it with that kind of comment. If you feel you can do better, please answer. If it's better than this one, I'll move the accept mark to you.

@Ryan 2015-04-14 07:47:41

"Potentially Unsemantic Markup": People don't use <input type="hidden"> any more. data-* attributes are appropriate and not unsemantic. "Dirties Up the Source": If you need to use AJAX anyway, then that may be true, but if it's relevant to the context then it has to go somewhere. "Harder to get structured data": Not really true. Whether it's JSON in a HTTP request or a data-* attribute doesn't make much difference. But true for binary data. "Tightly couples PHP to your data logic" Data has to be coupled to the view somehow. And decoupling has overhead in terms of performance and complexity.

@Madara Uchiha 2015-04-14 08:10:33

"People don't use X anymore", you'd be surprised. HTML is for content, not data. data-* attributes are almost always abused today to break the separation of concerns. How do you test code that was generated server-side? How do you mock the data for demonstration purposes?

@Atlas 2016-03-22 19:34:53

var data = <?php echo json_encode("42"); ?>; no longer seems to work. It returns an "unexpected token <" error. Any hints on the proper syntax here?

@Atlas 2016-03-22 20:16:22

@Hutch Moore 2016-06-28 15:38:35

Note: method 3 is insecure if you're outputting user-inputted data. You must either add /* <![CDATA[ */ before and /* ]]> */ after the code, or use the JSON_HEX_TAG parameter in json_encode; otherwise, it opens up your website to attack. As Pang noted, if "42" is instead "<!--<script>", it may break the DOM.

@Madara Uchiha 2016-06-29 06:59:50

@HutchMoore Adding CDATA was a requirement when we still used XHTML, it holds no meaning in HTML5, isn't required, and won't have any security benefits. What does <![CDATA[ in XML mean?

@Hutch Moore 2016-06-29 14:30:29

@MadaraUchiha whoops, you're right. I'm not sure what I was thinking there. (That would've prevented that attack in XHTML, though, right?) My latter point with JSON_HEX_TAG still stands, though.

@Christopher 'Solidus' DeJong 2016-07-11 17:39:07

"The world beyond, limbo, the city of shimmers, and Canada." That is where all data goes, my dudes. Canada. Anyway, my only problem with this is that this implies that the data we want in the first example a asynchronous. However, if we're generating jQuery for page styling, the last usage scenario is the easiest. The second example is a cleaner, and robust method versus the third, due to it inherently being easy to read. To the end user, they can't see it, so mugging the waters 2 miles ahead, the viewer won't see but the front of what they're glancing. End analogy.

@Synchro 2017-08-11 08:06:10

One big problem with the third approach is that it breaks if you have a CSP policy that does not permit unsafe-inline for script-src. This is a primary driver for wanting to do one of the other two approaches, though Using ajax to retrieve single values (that you probably have in-hand at the time the page's PHP is run) is wasteful and inefficient, meaning that the second approach is the easiest to live with. An easy way to handle larger data items is to put data in a script element with an application/json type, which won't break CSP.

@baptx 2018-08-27 18:13:32

This article also recommends to print data in the DOM instead of using AJAX and uses json_encode($data, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES); mathiasbynens.be/notes/json-dom-csp

@baptx 2018-08-27 18:48:59

A 4th solution would be to generate dynamically an external JavaScript file, it would have the advantage to separate HTML code from the data, avoid unnecessary DOM operations and be compatible with CSP (like @Synchro wrote) but it comes with an additional HTTP request. I am not sure if it is the best solution though. Someone wrote an answer about this solution here: stackoverflow.com/questions/23740548/…

@DeV 2018-07-19 12:15:26

  1. Convert the data into JSON
  2. Call AJAX to recieve JSON file
  3. Convert JSON into Javascript object

Example:

STEP 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

STEP 2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

@Jessé Catrinck 2014-07-18 22:00:45

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode() requires:

  • PHP 5.2.0 or more
  • $PHPVar encoded as UTF-8, Unicode.

@Nishant Mendiratta 2015-04-13 18:59:02

Simply use one of the following methods.

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

OR

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>

@Benjamin Gruenbaum 2015-04-13 18:59:35

What value does this add over existing answers?

@Nishant Mendiratta 2015-04-13 19:06:34

Keeping it simple and straight. For all users who do have much time to dig into deep explaination

@desbest 2015-05-02 19:30:37

Why was this downvoted? It's the simplest working solution.

@Doberon 2017-11-28 16:28:13

Simple is better

@Ankit Prajapati 2018-06-25 15:07:31

May be this is a silly question, but I am absolutely new to PHP world. Once we write the above code in .php file, how do I access the "js_variable" in my JavaScript file or my "index.html" file?

@Nishant Mendiratta 2018-06-26 06:42:01

@AnkitPrajapati Try to access it by checking document ready state. Using following script. document.onreadystatechange = () => { if (document.readyState === 'complete') { // document ready alert(js_variable) } };

@Ankit Prajapati 2018-06-26 15:09:39

@Nishant: Thanks for the response. Appreciated. I will try and let you know. Or maybe I will make use of Cookies. :)

Related Questions

Sponsored Content

89 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 6162714 View
  • 7685 Score
  • 89 Answer
  • Tags:   javascript arrays

86 Answered Questions

[SOLVED] How do JavaScript closures work?

18 Answered Questions

[SOLVED] Reference — What does this symbol mean in PHP?

88 Answered Questions

[SOLVED] How to validate an email address in JavaScript

41 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

38 Answered Questions

[SOLVED] How do you get a timestamp in JavaScript?

36 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

58 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

3 Answered Questions

7 Answered Questions

[SOLVED] How does PHP 'foreach' actually work?

Sponsored Content