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:
- El cliente hace un pedido al servidor (Envía un comando HTTP)
- El servidor lo recibe y lo analiza
- Si se trata de un php se lo pasa al intérprete correspondiente
- El intérprete procesa el código y genera una salida (Usualmente HTML)
- El servidor envía la salida hacia el cliente
- El cliente analiza la respuesta y dibuja la página
- 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:
- El cliente hace un pedido al servidor (Envía un comando HTTP)
- El servidor lo recibe y lo analiza
- Si se trata de un php se lo pasa al intérprete correspondiente
- El intérprete procesa el código y genera una salida (Usualmente HTML)
- El servidor envía la salida hacia el cliente
- El cliente analiza la respuesta y dibuja la página
- El cliente ejecuta el código Js
- 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).
- El cliente recibe la respuesta del servidor
- 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 agregar una página de error 500 en un proyecto PHP - 31/10/2024
- ¿Cuántos contenedoresnecesita tu php? - 28/10/2024
- Cuál es el mejor framework PHP para hacer APIs REST - 25/10/2024
tengo un ciclo en php donde cargo varias imagenes con el mismo nombre, al hacer clik sobre cualquier imagen, me trae el indice de la imagen en la que hice el click, al pasar a javascript y querer hacer lo mismo, me trae el indice de la última imagen, al hacer clik sobre cualquier imagen. Estoy desesperado por hallar una solución para este caso; les pido una ayuda para este caso.
Gracias por la atención prestada.
hola, tu codigo funciona pero si accedo a la pagina donde mande los datos y trato de imprimir algun valor me marca que la variable es undefined
Hola Gustavo:
Habría que mirar el código completo para ver cuál será el problema. Por lo que comentas, imagino que estás tratando de leer una variable que estará inicializada en un archivo php diferente… ¿puede ser?
Gracias por tu enseñanza, resulta que estoy haciendo un login consumiendo una api con fetch, luego de consumir esa api enviando confetch un obejto formdata el usuario y la contraseña necesito guardarla en sessionstorage y luego ese valor enviarlo a php. lo que deseo es poder mantener el login iniciado, pero como tengo el paradigma MVC con php necesito poder manipular el dato del nombre del cliente desde php. No he podido solucionarlo.
Hola Johannes:
Me temo que no comprendo del todo tu problema. ¿Podrías comentar un poco más en detalle cómo está implementado el MVC? Cuéntame qué has intentado a ver si te puedo guiar.
Saludos,
Hola, y si estoy en un archivo de php, donde abro javascript, y quiero pasar de javascript a php ahi mismo?
No entiendo como me serviria pasar variables a otro archivo php.
Hola Rodrigo!
Me temo que no es posible combinar JS con PHP de esa forma. Precisamente el problema es que php se ejecuta del lado del servidor y js del cliente, o sea, se ejecutan en dos tiempos diferentes.
Si tienes un php que genera js, desde el punto de vista del servidor el js es indistinguible de HTML, CSS o cualquier otra forma de texto y, desde el punto de vista del cliente, el php no existe (Al cliente le llega el texto generado desde el servidor).
Saludos!
Buenas tardes,
Tengo que insertar en BD:
Tengo un query.
Pero uno de los valores del query se almacena en un 5
Como puedo sacar ese valor para insertarlo en mi query?
Hola Oscar!
No creo comprender del todo tu pregunta, a qué te refieres con «uno de los valores del query se almacena en un 5»? ¿Podrías compartir algo de código?
Saludos!
Perfecto. Pero y al reves datos sacados de una bd y los interprete javascript?
Gracias.
Hola Miguel Angel!
Gracias por tu pregunta
En este artículo está detallado cómo hacerlo al revés 🙂
Saludos cordiales, podría enviar la direccion de una casa (En este caso es de una pagina de propiedades en USA) a este sitio web desde una aplicacion php local? https://propertyquest.dc.gov/
Supongo que sí… eso dependerá principalmente de las medidas de seguridad adoptadas por el sitio del que quieres obtener la información.
¿Qué probaste que no haya funcionado?
Hola, que tal, creo que no me quedó del todo claro ya que se está enviando una variable declarada en php a un mismo archivo php.
¿Cómo sería pasar una variable declarada en js a un archivo php?
Tengo una funcioón en un archivo js, bueno, tengo esto: y quiero enviar la variable Folio
var NumMin=10000000;
var NumMax=99999999;
function getNumRand(NumMin, NumMax) {
return Math.round(Math.random()*(NumMax-NumMin)+parseInt(NumMin));
}
var Folio = getNumRand(NumMin, NumMax);
¿El ajax sería de la siguiente manera?
$.ajax({
url: ‘pagar.php?var=Folio’, success: function (data) {
alert(‘El servidor devolvió «‘+ data + ‘»‘);
}
});
Y el archivo php, ¿sería así?
Espero su respuesta, un saludo.
Casi 🙂
El javascript debería ser:
$.ajax({url: ‘pagar.php?var=' + Folio, success: function (data) {
alert(‘El servidor devolvió «‘+ data + ‘»‘);
}
});
La propiedad url del objeto a pasar a la llamada $.ajax es un string. Si le querés agregar el valor de una variable de js la tenés que concatenar.
No le encuentro sentido a tu codigo. Nunca haces:
var variable_js = 2;
$variable_php = variable_js;
Pasas por ajax una variable en php para leerla en php y devolver lo mismo que pasas. Para eso podes solamente hacer
alert();
Lo interesante seria pasar a php variable_js y que php pueda leer que es 2
Hola Mariano:
Gracias por tu comentario 🙂
Es cierto, el código que estoy mostrando no es especialmente útil :p, se trata de un simple ejemplo de cómo comunicar Js con PHP y, sí, claramente en este ejemplo sería más simple usar un alert como bien mencionás. Claro que si lo dejara ahí no estaría mostrando cómo pasar información de Js a PHP…
Respecto de lo que comentás:
Justamente es la idea del artículo: no es posible hacer eso porque Js y PHP ejecutan en tiempos diferentes.
Saludos,
Hola Mauro bns dias,
Soy nuevo en esto, y quisiera saber si de acuerdo a lo explicado por ti, al principio, ¿no existe otra manera, diferente de Ajax, para enviar los valores de las variables desde javascript a php?.
Estoy realizando una aplicación a manera de práctica donde ya hice el ejercicio de enviar los datos desde el formulario html a php y cargarlos en la base de datos, todo funciona bien.
Ahora estoy realizando la validación del formulario con javascript, hasta aquí todo bien, pero no se cómo enviar estos datos para que php los procese y los envíe a la base de datos.
ya anteriormente lo había hecho con Ajax pero quisiera saber si lo puedo hacer con javascript, sin necesidad de Ajax.
Gracias.
Hola!
El usar o no ajax depende de qué quieras lograr. Si tu objetivo es evitar la recarga de la página tienes la opción de usar Ajax o un WebSocket… no creo que sea conveniente en tu caso.
Si no te importa recargar la página puedes usar simples formularios HTML y dejar que el navegador envíe los datos vía GET o POST y del lado de PHP los levantas de la variable correspondiente.
Exitos!
Hola Mauro!,
tengo una gran duda, veo que se habla mucho de que Jquery está muerto, hace ya mucho tiempo, yo sigo usándolo pero…. si está muerto como mucha gente dice, llegará un momento en que dejará de funcionar?, los navegadores dejarán de usarlo?
Si es así, en mi caso por ejemplo que estoy terminando un CRM que llevo casi un año y medio… estoy muerto…
Recomiendas alguna alternativa de manera nativa?, ajax nativo o javascript?, no se si esto sería una solución…
Ya me dices.
Gracias por el post.
Hola Fran:
Gracias por el mensaje!
Respecto de tu pregunta, soy algo escéptico respecto de la «muerte» de jQuery… yo personalmente lo sigo usando y me va bastante bien con él (aunque, nobleza obliga) casi todo mi trabajo pasa más por el BackEnd y hago alguna pequeña cosita en FrontEnd cuando necesito.
En principio te diría que no te desesperes… aún si jQuery muere, no será mañana… hay tiempo.
Lo que sí te recomendaría es que si tienes mucho de front vayas mirando Vue.js o React que parece ser lo que se está poniendo de moda estos días.
Exitos!
El método que utilizo yo para pasar datos entre JS a PHP es «Fetch»
Sintaxis:
Datos = new URLSearchParams(
Valor1=${Valor1}&Valor2=${Valor2});fetch(‘URL’,{
method: ‘post’,
body: Datos
})
.then((Varibale3) =>{
return Variable3.json();
)}
.then(Variable4)=>{
console.log(Variable4);
})
el Primer .then nos sirve para mencionarle que tipo de dato va retornar en el caso es json();
el segundo .then retorna el valor de las consultas de php,
con URLSearchParams pasamos los parametros de JS a PHP
NOTA: no se si te funcione pero es una opcion a Jquery