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>
This question is related to
javascript
php
The answer is
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.
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");
}
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.
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
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>';
- Convert the data into JSON
- Call AJAX to recieve JSON file
- 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);
}
}
}
Here is is the trick:
Here is your 'PHP' to use that variable:
<?php $name = 'PHP variable'; echo '<script>'; echo 'var name = ' . json_encode($name) . ';'; echo '</script>'; ?>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>
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;
?>
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:
- Send more requests from the client after the initial request is done.
- 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.
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.
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.
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>
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');
// Variable "service" 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
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'.
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
json_encode() requires:
- PHP 5.2.0 or more
$PHPVarencoded as UTF-8, Unicode.
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.
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
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.
Source: Stackoverflow.com