Manual de JavaScript: Pasar variables desde JavaScript a PHP y viceversa

Una de las preguntas más frecuentes en desarrollo web es cómo pasar variables de JavaScript a PHP o a la inversa. El problema es que JavaScript es un lenguaje del lado del cliente (client side), mientras que PHP es un lenguaje del lado de servidor (server side).

De PHP a JavaScript

Pasar variables desde PHP a JavaScript es sencillo, simplemente hay que imprimir el valor que la variable tiene en PHP en el código JavaScript mientras se genera la página.

Veamos un ejemplo de cómo pasar variables de PHP a JavaScript:

<?php
$phpVar = "Hello";
?>
 
<script type="text/javascript">
    var jsVar = "<?php echo $phpVar; ?>";
    alert('jsVar: ' + jsVar);
</script>

De JavaScript a PHP

Pasar variables desde JavaScript a PHP es más complejo, ya que cuando Javascript se ejecuta en el cliente, PHP se ejecutó mucho tiempo antes en el servidor.

La manera usual de hacerlo es recargar la página pasando las variables como parámetros para que PHP pueda verlas.

Podemos hacerlo empleando el método GET, pasando las variables en la URL como parámetros, de tal manera que PHP podrá verlas a través del objeto $_GET.

Si en vez del método GET usamos el método POST, las variables no se verán en la URL y PHP podrá acceder a ellas mediante el objeto $_POST.

Para recargar la página usaremos la propiedad window.location.href en JavaScript.

Veamos un ejemplo de cómo pasar variables de JavaScript a PHP:

<script type="text/javascript">
function javascript_to_php() {
    var jsVar1 = "Hello";
    var jsVar2 = "World";
    window.location.href = window.location.href + "?w1=" + jsVar1 + "&w2=" + jsVar2;
}
</script>
 
<?php
// comprobar si tenemos los parametros w1 y w2 en la URL
if (isset($_GET["w1"]) && isset($_GET["w2"])) {
    // asignar w1 y w2 a dos variables
    $phpVar1 = $_GET["w1"];
    $phpVar2 = $_GET["w2"];
 
    // mostrar $phpVar1 y $phpVar2
    echo "<p>Parameters: " . $phpVar1 . " " . $phpVar1 . "</p>";
} else {
    echo "<p>No parameters</p>";
}
?>