How can I combine a variable from php to Javascript
I have tried to combine PHP variables in javascript, I have read in many forums that it is complicated to do the combination of both but you can (according to the answers). My problem lies in the following:
In my php code I have a variable called IMAG string images which I would like to be able to use in javascript, for example:
<?php
$imagenes = "imagen1.pngimagen2.pngimagen3.png";
?>
<script type="text/javascript">
var img = <?php echo $imagenes;?>
</script>
I don't know if something like the code I entered can be done, any suggestions?.
Greetings and Thank you.
4 answers
Indeed. Passing the value of variables from PHP to javascript is trivial (eye the value not the references ;-). As you have also been told. You have to keep in mind that if it is the type string you must do it as follows:
<?php
$imagenes = "imagen1.pngimagen2.pngimagen3.png";
?>
<script type="text/javascript">
var img = '<?php echo $imagenes;?>'
</script>
If by a chance you want to pass the value of type array... I guess it doesn't make much sense to me the value of $imagenes... you should do it as follows:
<?php
$imagenes = ' "imagen1.png","imagen2.pn","gimagen3.png" ';
?>
<script type="text/javascript">
var img = [ <?php echo $imagenes;?> ]
</script>
And if you want to pass a array from PHP to a array from javascript:
<?php
$imagenes = array( "imagen1.png","imagen2.pn","gimagen3.png" );
?>
<script type="text/javascript">
var img = [ <?php echo implode("','",$imagenes);?> ]
</script>
There are many ways to do the job, but in all cases you have to be especially careful with the escape of quotes. Without this, unwanted effects could occur in the application.
We could use addslashes() to do the job:
<?php
$imagenes = "imagen1.pngimagen2.pngimagen3.png";
?>
<script type="text/javascript">
var img = "<?= addslases($imagenes) ?>";
</script>
This method would not be completely secure because discrepancies in the character set (not using utf-8) could allow the </script> tag to be closed causing security issues (XSS ).
To improve security and to support arbitrary data (classes, arrays, etc. ) it is better to use json_encode():
<?php
$prueba = new stdClass();
$prueba->matriz = [
'imagen1' => 'url1',
'imagen2' => 'url2',
];
$prueba->imagen1 = 'url1';
$prueba->imagen2 = 'url2';
?><script type="text/javascript">
var datos = <?= json_encode($prueba) ?>;
console.log(datos);
</script>
If $prueba is a string json_encode it will quote its contents and escape any quotes from inside it. If it is an array it will use [], or it will use {} for classes/objects, etc.
TL; DR (too long, no need to read it)
If you might have problems or discrepancies in character encoding (the one returned by the server headers does not match the one indicated in the HTML or you just do not use utf-8) I recommend adding the parameter JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS to json_encode as follows:
<?php
$prueba = new stdClass();
$prueba->matriz = [
'imagen1' => 'url1',
'imagen2' => 'url2',
];
$prueba->imagen1 = 'url1';
$prueba->imagen2 = 'url2';
?><script type="text/javascript">
var datos = <?= json_encode($prueba,
JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS
) ?>;
console.log(datos);
</script>
Function security json_encode() is more than sufficient if everything is correctly encoded in utf-8. The RFC indicates that by default is used UTF-8 although UTF-16 could also be used , so if different encodings are mixed a quotation mark for a particular character set could be incorrectly escaped.
Of course you can send information from PHP to Javascript without problems. In fact, the way you do it is the right one because PHP is a server-side language and Javascript a client-side language, you will have no problems because all the code PHP is executed before the code Javascript.
It's actually quite common to combine PHP with Javascript/jQuery and it's not seen as bad practice.
Is very easy to achieve
<?php
$ima = "imagen1.pngimagen2.pngimagen3.png";
?>
<script type="text/javascript">
var img = '<?php echo $im;?>'
</script>
As you can see it has no complication is the same as using them in html using echo