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.

11 comentarios en “Cómo pasar una variable de JavaScript a PHP

    • 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?

  • Fernando Arreola Sandoval

    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.

  • Mariano Sanchez

    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:

      Nunca haces:

      var variable_js = 2;
      $variable_php = variable_js;

      Justamente es la idea del artículo: no es posible hacer eso porque Js y PHP ejecutan en tiempos diferentes.

      Saludos,

  • Engelberto Ibagon

    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!

    • Jose Alexis Nuñez Torres

      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

¿Te quedó alguna duda? Publica aca tu pregunta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: