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 😉
- Cómo enviarencabezados SOAP desde PHP - 09/12/2024
- Por qué PHP 8 no satisface el requisito ^7.3 de composer - 09/12/2024
- Cómo usar PHPUnit - 03/12/2024
saludos tengo una variable en php como hago para que este valor lo lea un json
muchas gracias por la explicacion ahora me quedo mas claro. Para clarificar un punto si yo estoy obteniendo por medio de php un conjunto de datos de tipo cadena, podria presentarlos en un script de java script (solo para visualizacion!) con un echo de PHP?? gracias!
Hola Alberto:
En principio diría que sí, aunque para darte una respuesta más completa necesitaría ver el código sobre el que estás trabajando.
Saludos,
muchas gracias! sólo requería confirmar si se podía hacer y lo logré! estaba sacando los datos de una tabla y poniendolos en un recordset y despues presentando en html los datos obtenidos, logre hacerlo pero no me satisfizo la solucion asi que ahora estoy trabajando con un archivo json y javascript, muchas gracias por tu amable respuesta
hola , tengo una duda que ya me esta matando y no se como resolverla.
Estoy creando un formulario con una tabla que cargo después de realizar una selección el la misma pagina. Al presionar el botón carga , esta se carga sin problema.
La tabla html , tiene varias columnas , dentro , 2 columnas (presente col1, ausente col2 ), cada una tiene un checkbox.
Mi ideas es que cuando desmarque el CB presente, automáticamente se marque el CB ausente y así en lo sucesivo, es decir, si desmarco ausente , dse debe marcar presente automáticamente.
Para complicar mas el tema en la columna 5, existe una combobox que contiene una lista de detalle en caso que el invitado este ausente, una vez que termine de pasar la lista, el programa deberá recorrer cada una de las filas de la tabla grabando en la base el resultado, es decir, si esta presente, el código y la fecha, en caso contrario, deberá graba ausente y obtener del combobox de la tabla el código que el usuario selecciono de la lista con el motivo el por que no asistió a la reunión.
Si me puedes dar una mano con este tema te estaré muy agradecido.
gracias.
Atte,
Rodrigo JR.
Hola Rodrigo:
Se ve un poco complejo como para responderlo por aquí. Lo que veo a simple vista es que necesitarás bastante código JS para resolverlo. ¿Tienes algo desarrollado que puedas compartir? De esa forma será más simple darte alguna indicación.
Saludos,
Saludos, Muchas gracias por el articulo me sirvio para entender un poc mas, ahora este codigo funciona solo si se se escribe en el mismo archivo .php, en mi caso tengo un archivo aparte js.js donde escribo todo mi codigo de javascript, y al intentar este codigo el mensaje que recibo del alert es la cadena en lugar del valor de $a.
Es posible hacerlo cuando se tienen ficheros externos comoe s mi caso? Agradecido de antemano.
Hola!
Pues depende mucho de cómo sea la relación entre tus archivos php y js. Lo importante es comprender la diferencia de los tiempos de ejecución.
Algo que podrías hacer es generar, desde php, un archivo js que contenga todas las definiciones de variables que necesitas pasarle a js y luego, desde js, incluir ese archivo.
Saludos!
Hola. Espero que estés bien. Tengo un lío y es que estoy trayendo información de una base de datos a través de PHP. Es un array de datos que pasa desde una archivo «modelo», luego al controlador y al final lo imprimo en la vista de forma dinámica. Todo me está funcionando, lo que sucede es que esa información la voy a meter dentro de un slider de Glider.js, y para eso necesito hacer una función de JavaScript que me tome la clase de uno de los elementos HTML que estoy imprimiendo con PHP. El JavaScript simplemente no lo reconoce. Si intento hacer otro slider aparte directamente con el código HTML, la función en JavaScript reconoce esos elementos, pero si los elementos con generados dinámicamente con PHP, es como si no existieran. Esto me pasa igualmeente
Hola José:
Gracias por tu pregunta!
Es raro… ¿podrías compartir el código HTML/js que está generando tu php? (El código que interpreta el navegador digo a ver si aparece algo raro).
Saludos!
Hola buenas quisiera saber como puedo rescatar un array en php a un archivo js, ya que necesito manipular sus datos en js para poder mostrarlo a través de un grafico
Hola Elías!
Gracias por tu pregunta. Se trata de un caso particular de lo que se expone en este posteo, lo que necesitas hacer es crear ese mismo arreglo del lado de js, algo como:
<?php
$array = [1,2,3];
?>
<script type="text/javascript">
let miArray = [<?php
for ( $i = 0; $i < 3; $i++ ) {
echo $array[$i].( $i < 2 ? ', ' : '');
}?>];
</script>
hola Mauro, mira esa variable de solución no es lo que busco , ya que el array me lo trae una función y a la cual necesito pasar a un js y en ambos casos son archivos separados, no los estoy trabajando todo dentro de la misma hoja
Ya, pues entonces creo que no comprendí bien tu necesidad… intentaré describir tu escenario y me confirmas:
¿Es así?
si es correcto, tengo entendido que debo pasar ese array de la funcion como un json_encode, pero no logro captar de como traer ese array a mi js , he averiguado y creo que se debe hacer con ajax
Ya veo… pues sí, la solución es utilizar ajax.
Lo que deberías tener es algún php que invoque esa función e imprima por pantalla el resultado de hacer json_encode:
<?php
header('Content-Type: application/json');
echo json_encode(funcion_que_retorna_array());
Y del lado de JavaScript, si usas jQuery:
let miArray = [];
$.ajax(
'http://dominio.com/php_que_retorna_json.php',
{
success: function( data ) {
miArray = JSON.parse(data);
}
}
);
Buenas Tardes, subo un archivo en PHP y un par de alertar al momento de subir el archivo, requiero que el nombre del archivo que ya fue guardado en una carpeta del servidor, se pueda mostrar en pantalla, el echo simplemente no funciona. Existe alguna manera de recuperar los echo y poder mostrarlos en el HTML ?
Hola César:
Gracias por tu pregunta 🙂
¿Podrías ampliar un poco cómo estás haciendo la subida? Si lo haces a través de Ajax podrías hacer que el servidor retorne la ruta completa donde se ha almacenado el archivo y, del lado del cliente podrías mostrar esa información en algún elemento HTML (Un div por ejemplo).
No comprendo del todo el problema que tienes con los echo… ¿puedes mostrar algo de código?
Saludos!
Este es el codigo donde se valida que un archivo subido corresponda en tamaño y extension:
if ($archivo_extension == $extensiones) {
} else {$errors[] = 'La extension no corresponde: ' . $archivo_nombre . ' ' . $archivo_tipo;
echo "Ups! <b>$archivo_nombre_base</b>, no es un archivo con extensión valido.$archivo_tipo";
echo "<br/>";
}
if (($archivo_tamanio / 1024) >= $tamanio) {
$errors[] = 'El tamaño del archivo' . $archivo_nombre_base . ' excede el Maximo permitido' . $tamanio . 'en Kbs';
echo "Ups! El tamaño de tu archivo $archivo_nombre_base, supera los $tamanio KBs permitidos.";
echo "<br/>";
echo "El tamaño de tu archivo $archivo_nombre_base, es de $archivo_tamanio .";
}
if (empty($errors)) {
move_uploaded_file($archivo_nombre_temporal, $ruta . $archivo_nombre);
echo "la ruta destino donde se guardo el archivo es: " . $ruta . $archivo_nombre;
session_start();
$_SESSION["archivoGuardado"]= "El archivo es: " . $ruta . $archivo_nombre;
}
Lo que necesito es poder visualizar en el HTML los echo donde se indica la ruta y el nombre final del archivo, los errores no tanto pero solucionando uno los otros es mas fácil.
¿Cómo se arma el HTML al que te refieres? ¿Los mensajes de los echos no están apareciendo en ningún lado? ¿Puede ser que el array $errors esté inicializado anteriormente y por eso nunca de empty?
Buenas Noches, los echo solo se pueden ver en la consola , tengo un HTML en un index.php este es e body :
Archivo a Subir:
<!—->
<!—->
Tamaño del Archivo: 0
http://js/cargarArchivos.js
http://js/validarArchivos.js
Un código en javascript detecta todo el form, y procesa la petición del envió del archivo obtenido desde el html, ya que tenemos el archivo en el usando un change se envía al PHP subir.php, que es el código que inicialmente expuse, ahí si ´puedo ver todos los ecos que se van presentando según lo que ocurra pero solamente en la consola del explorador. Entonces creo que ahora necesito pasar mis ecos al javascript y de ahí mostrarlos en el HTML, solo necesito mostrar el archivo recién subido desde el php de la previa intervención a ahora tengo esto en donde muevo el archivo con el move_uploaded_file
$filepath = "$ruta . $archivo_nombre";
$filename = basename($filepath);
echo json_encode($filename); <-- Aqui me regresa el nombre del archivo, solo no puedo mostrarlo en el HTML.
Gracias
Saludos
Ok, por lo que comentas imagino que el tema es cómo rescatas ese json_encode desde el lado del javascript.
Usualmente cuando realizas una llamada ajax defines un callback para el caso de éxito.
Este callback recibe algunos parámetros, uno de ellos es la respuesta obtenida desde el servidor.
Con esta información lo que podrías hacer es utilizarla para modificar el HTML de algún elemento que tengas definido dentro de tu página (Un »
» por ejemplo) y así mostrar el nombre del archivo que te está devolviendo PHP.
Para darte más detalles necesitaría ver un poco de tu javascript (Especialmente para ver qué librerías estás usando).
Saludos!
Muy buen articulo! Y en caso de querer hacerlo a la inversa? Enviar un dato que se obtiene del lado del cliente a PHP para generar alguna funcionalidad especifica, la unica opcion es usar Ajax?
Gracias Alberto! Si lo que quieres es enviar un dato sin que se re-cargue la página las opciones que veo son Ajax o WebSockets.
Puedes ver más info en https://academy.leewayweb.com/como-pasar-una-variable-de-javascript-a-php/