Etiqueta: javascript

  • Cómo pasar una variable de JavaScript a PHP

    Cómo pasar una variable de JavaScript a PHP

    Si estás programando algún sistema web medianamente complejo, es muy probable que te hayas enfrentado a este problema alguna vez.

    En muy resumidas cuentas, lo que estás intentando hacer es algo como:

    var variable_js = 2;
$variable_php = variable_js;

    Sería lindo que todo funcionara de esa forma, ¿no? Lamentablemente, la cosa no es tan fácil (Pero tampoco es tan difícil en realidad).

    Por qué no se puede pasar directamente un valor de Js a PHP

    Esta pregunta esconde un poco de confusión respecto de cómo funcionan las aplicaciones web. Algo parecido a lo que comentaba en este artículo.

    El punto es que PHP y JavaScript se ejecutan en lugares y momentos diferentes.

    Es como si estuvieses leyendo un libro y te encontraras con algo que no comprendés del todo y para solucionarlo le hicieras la pregunta al libro… algo no va a funcionar.

    Empecemos entonces por comprender el ciclo de vida de una aplicación web.

    Cómo es el ciclo de vida de una aplicación web

    El flujo típico de una aplicación web es el siguiente:

    1. El cliente hace un pedido al servidor (Envía un comando HTTP)
    2. El servidor lo recibe y lo analiza
      1. Si se trata de un php se lo pasa al intérprete correspondiente
      2. El intérprete procesa el código y genera una salida (Usualmente HTML)
    3. El servidor envía la salida hacia el cliente
    4. El cliente analiza la respuesta y dibuja la página
    5. El cliente ejecuta el código Js

    Entonces, si observás este ciclo, te darás cuenta que, para el momento en que la variable Js aparece en escena… php ya está haciendo cualquier otra cosa.

    Pues entonces… ¿no hay solución? ¡No tan rápido!

    Lo que necesitas es poder ejecutar JS y PHP en paralelo (es decir, en un mismo tiempo).

    Cómo enviar información de JavaScript a PHP

    La solución al problema pasa por usar un poco de imaginación… y ajax :).

    Cómo funciona una aplicación con AJAX:

    1. El cliente hace un pedido al servidor (Envía un comando HTTP)
    2. El servidor lo recibe y lo analiza
      1. Si se trata de un php se lo pasa al intérprete correspondiente
      2. El intérprete procesa el código y genera una salida (Usualmente HTML)
    3. El servidor envía la salida hacia el cliente
    4. El cliente analiza la respuesta y dibuja la página
    5. El cliente ejecuta el código Js
      1. Dentro del código se ejecuta una segunda petición al servidor (la cual tiene su propio ciclo de vida que culmina con una respuesta HTTP).
      2. El cliente recibe la respuesta del servidor
      3. El cliente actúa sobre la respuesta recibida

    Dependiendo de cuál sea tu necesidad puntual (Es decir, qué necesitas que la aplicación haga una vez reciba la variable de JS), deberás determinar si el cliente debe bloquearse (Es decir, no hacer nada hasta que PHP complete su procesamiento de la información enviada) o puede continuar con alguna otra tarea.

    Un ejemplo de esto sería:

    <?php
$var = 1;
?>
<html>
	<body>
		<input type="button" value="Enviar variable" id="send"/>
	</body>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script type="text/javascript">
	$('#send').click( function() {
	alert('Enviando!');
		$.ajax(
				{
					url: 'get_var.php?var=<?php echo $var; ?>',
					success: function( data ) {
						alert( 'El servidor devolvio "' + data + '"' );
					}
				}
			)
		}
	);
	</script>
</html>

    Y el get_var.php:

    <?php
echo 'Recibi '.$_GET['var'];

    Y de ese modo se puede comunicar JavaScript hacia PHP.

  • Cómo pasar una variable PHP a JavaScript

    Cómo pasar una variable PHP a JavaScript

    Un problema muy común es cómo hacer para utilizar información que se tiene en PHP en la ejecución de código JavaScript.

    Detrás de esta inocente pregunta sin embargo, se esconde un error conceptual similar al que tratamos en este artículo: no se domina por completo el esquema de ejecución de una aplicación web.

    Es entendible: la confusión se produce porque en muchas ocasiones se escribe un único texto que se ejecutará en diferentes lugares y momentos. Es un poco como jugar a este juego:

    Para entenderlo bien veamos un ejemplo simple:

    <table>
<?php
for ( $i = 0; $i < 5; $i++ ) {
   ?>
   <tr>
      <td><?php echo $i; ?></td>
   </tr>
   <?php
}
?>
</table>

    Este código está mezclando puro código HTML con PHP, pero el PHP se ejecuta en el servidor, mientras que el HTML es interpretado del lado del cliente…

    Recordemos cómo es que funciona un pedido de este estilo:

    El cliente solicita un archivo llamado «pagina.html», pero lo que recibirá no será su contenido si no el resultado de la interpretación de ese archivo por PHP.

    Y ¿qué hace PHP con ese archivo? Todo lo que no esté encerrado entre <?php y ?> será emitido literalmente como se encuentra en el archivo original, mientras que el texto que sí está entre <?php y ?> será analizado según las reglas del lenguaje y, si genera alguna salida, será adicionado a la salida que se estaba generando.

    En definitiva, después de pasar por el intérprete de PHP, la salida generada será:

    <table>
  <tr>
    <td>0</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>

    Y será eso lo que el cliente (el navegador probablemente) interprete y genere algo como:

    0
    1
    2
    3
    4

    Bien… y ¿qué hay del JavaScript?

    JavaScript es un lenguaje de programación que se ejecuta del lado del cliente (Salvo en casos como NodeJs, pero para nuestro ejemplo diremos que lo usaremos en su versión clásica).

    Esto quiere decir que, desde el punto de vista del servidor, HTML y JavaScript son indistinguibles (O mejor dicho, la diferencia entre ellos es irrelevante): para el servidor, todo lo que no es PHP es texto que debe ser enviado en forma literal al cliente (Y será el cliente el responsable de decidir qué quiere hacer con ese texto).

    De modo que hacer algo como:

    <?php 

$a = "Hola Mundo!";
?>
<script type="text/javascript">
alert( $a );
</script>

    No va a dar el efecto que buscamos (Mostrar en la pantalla del cliente el mensaje «Hola Mundo!» ya que la variable $a es conocida al momento de ejecutar PHP (Es decir, del lado del servidor), mientras que el alert es JavaScript (se ejecutará del lado del cliente).

    Para hacerlo más claro, lo único que el cliente recibirá es:

    <script type="text/javascript">
alert( $a );
</script>

    Ya que PHP se ejecutó antes (Cuando se estaba generando la respuesta) y, como todo este código está fuera de los tags de apertura y cierre de PHP, es enviado así como está.

    ¿Cómo se puede resolver este problema? La clave está en comprender bien los tiempos en los que cada evento sucede.

    Si pensamos en que JavaScript es parte del texto que se envía al cliente y que PHP es una herramienta para generar ese código… ¿por qué no generar texto JavaScript usando PHP?

    Algo como:

    <?php 

$a = "Hola Mundo!";
?>
<script type="text/javascript">
alert( "<?php echo $a; ?>" );
</script>

    De esta forma lo que recibe el cliente es:

    <script type="text/javascript">
alert( "Hola Mundo!" );
</script>

    En definitiva, si lo mirás con detenimiento notarás que no estamos realmente pasando la variable $a a JavaScript, si no que estamos usando su valor (El que tenía al momento de ejecutar PHP) hacia JavaScript para poder usarla (que no es lo mismo pero se acerca bastante 🙂 )

    No es del todo infrecuente usar este tipo de trucos para generar código JavaScript en forma dinámica… sólo hay que ser muy consciente de qué parte de nuestro código se ejecutará en cada momento (Para esto ayuda mucho tener un buen IDE a mano).

    ¿Te quedó alguna pregunta? Me encantará leerla en los comentarios 😉