Actualizar variable PHP cada x segundos con jQuery Ajax

En este artículo vamos a seguir dando pie a las tecnologías PHP, jQuery y Ajax para conseguir efectos sorprentes y dinámicos que te pueden resolver muchos de los problemas que se te puedan presentar hoy en día a la hora de crear una página Web.

En el ejemplo que vamos a ilustrar simplemente vamos a ver como se actualiza una variable cada 3 segundos, teniendo en cuenta que el valor está registrado en una base de datos.

Lo primero que necesitaremos es conectar a nuestra base de datos para recoger la variable que queremos visualizar y actualizar. La actualización que vamos a aplicar no va a ser más que sumarle a lo que ya hay guardado el tiempo transcurrido,  en este caso, 3 segundos. Tan solo es un ejemplo, pero piensa en la cantidad de situaciones en las que podríamos utilizar estas lineas de código.

<?php
include('../../config_mysqli.php');
 
$result = $conexion->query("SELECT * FROM `counters` WHERE id_counter=1");
if ($result->num_rows > 0) {
    $data = $result->fetch_assoc();
}
?>

 

En la primera linea lo que estamos haciendo es incluir un archivo para conectar a la base de datos. No es el objetivo de este artículo explicar como conectar a una base de datos. Pero si necesitas saber como hacerlo solo tienes que observar el siguiente artículo: Como interactuar con una base de datos MySQLi. Seguidamente ejecutamos la query que nos devuelve un número guardado en la base de datos que depositamos en la variable $data. Ahora solo faltaría mostrar este número allí donde deseemos.

<span id="counter"><?php echo $data['counter']; ?></span>

 

Fíjate que en el tag span le estamos añadiendo un identificador que será la clave para que se ejecute correctamente el siguiente código jQuery:

<script type="text/javascript">
$(document).ready(function() {	
    function update(){
        var current = $('#counter').text();
        var sum = Number(current) + 3;
        var dataString = 'sum='+sum;
 
        $.ajax({
            type: "POST",
            url: "sum.php",
            data: dataString,
            success: function() {
                $('#counter').text(sum);
            }
        });
    }
 
    setInterval(update, 3000);
});
</script>

 

En este caso, hemos creado una función que llamamos update() que se ejecuta cada 3 segundos. Dentro de esta función estamos recogiendo el texto que hay dentro del elemento identificado con id=»counter», hacemos una suma y generamos un string que pasaremos mediante el método POST al archivo PHP vía AJAX.

Fíjate que en el success del Ajax, es decir, una vez ya ejecutado el archivo sum.php estamos depositando en el elemento con identificador id=»counter» el valor de la nueva suma.

Hemos hecho la suma en el mismo jQuery pero se podría hacer también en el PHP.

Nuestro archivo PHP lo hemos nombrado como sum.php y contiene lo siguiente:

<?php
include('../../config_mysqli.php');
$sum = $_POST['sum'];
$update = "UPDATE counters SET counter = ".$sum." WHERE id_counter = 1";
$conexion->query($update);
?>

 

En este archivo estamos volviendo a conectar con la base de datos, capturamos mediante POST el valor de la suma y realizamos la query de actualización. Es importante saber que para ejecutar el código anterior, vuestra página disponga de la librería jQuery, deberá incluirlo en su página si no lo tiene, como por ejemplo:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(20 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

30 respuestas a “Actualizar variable PHP cada x segundos con jQuery Ajax”

  1. Erick dice:

    Hola José, gracias por el aporte. tengo algunas dudas con el código. Me aparece el siguiente código de error:

    Warning: Undefined array key «counter».

    Al parecer se refiere a la linea de la etiqueta . Esta etiqueta, junto al código del script así como el link de jquery, las agregué en un archivo llamado index.php, dentro de una etiqueta de html. También tengo otros tres archivos. Uno es database.php que es el de la conexión a la base de datos; otro es consulta.php, que es el archivo del query para la consulta; y por último tengo el archivo de sum.php. Sabes que es lo que estoy olvidando o qué estaré haciendo mal?

    Por otro lado, quiero utilizar este código para hacer una especie de contador de días. Por decir, cuando se cumpla un día o la cantidad equivalente en segundos, quiero que se actualice mi BD y que al registro del día actual (supongamos 90) se le decremente en 1 (quedaría en 89) y así cada día hasta llegar a 0. Crees que con este código es una forma viable de hacerlo?

    Agradezco tu respuesta de antemano.

    • Jose Aguilar dice:

      Hola,

      Gracias por tu mensaje.

      En primer lugar debo decir que quizá este post no es la mejor solución para tu necesidad. Yo intentaría pensarlo en hacerlo con PHP ya que no creo que un usuario esté todo un día entero esperando que esa información se actualice.

      Jose Aguilar,
      Saludos

  2. Ronald dice:

    Esto solo actualiza cuando estas en la pagina que contiene el codigo.
    Pero cuando este en cualquier lugar dentro de mi aplicacion quisiera que ella misma hiciera consultas a una de mis tablas y que dependiendo de la fecha si es menor a la actual modificara otros valores

  3. NANCY dice:

    Hola tengo una duda similar, soy novata asi que jajja por favor si pueden ayudarme seria de super ayuda.
    tengo una pagina html programada con mi php.
    mi base de datos es MySql , tengo los tipicos botones, de agregar, eliminar y modificar.
    Tengo tres radiobutton, en donde puedo modificar el nombre de mis radio
    por ejemplo, el primero se llama ACTIVO pero lo modifico y se llama DISPONIBlE en mi base de datos todo bien si se modifica pero al volver a cargar mi pagina me sigue aparenciendo como ACTIVO
    hay alguna forma, en que pueda hacer que se actualice mi pagina con la nueva info de mi base

  4. Melvin Pérez dice:

    Hola José.

    Retomo la pregunta de Ricardo que la hizo el año pasado:

    «hola jose , necesito tu ayuda no se si este código me pueda ayudar

    ejemplo:

    tengo una variable

    $total_iva = “200”;
    $total = number_format($total_iva,2,’.’,”);

    si quisiera que ese monto de 200 sea modificado por medio de ajax se podría hacer con este método o existe algún otro método ? »

    Puedes por favor indicar si esto es posible mediante este método que compartiste?
    Quedo atento a tus comentarios.

  5. Antonio Aranzana dice:

    Hola Jose,
    quiero desarrollar un programa PHP que debe estar funcionando permanentemente y en segundo plano, desde el cual, cada «x» tiempo (por ejemplo cada minuto), hará una lectura a una BD para publicar entradas programadas a Twitter (algo parecido a lo que hace la herramienta HootSuite). Es decir que tu ejemplo sería perfecto ya que el script llama regularmente a un fichero PHP mediante ajax, pero no se como podría ejecutarse sin necesidad de invocar la url desde el navegador…
    ¿Alguna sugerencia?
    Muchas gracias

    • Jose Aguilar dice:

      Hola,

      Gracias por su mensaje.

      Para su necesidad me temo que el tutorial que ha escogido no es válido. Para su caso deberá armar un script php que haga la lectura a la base de datos y haga las publicaciones. Este script debe configurarlo en el servidor como tarea programada. En el panel de control de la mayoría de servidores se permite crear tareas programadas con el objetivo de ejecutarse cada x tiempo. Todo esto se puede configurar en la llamada.

      Saludos

  6. MUCHAS GRACIAS ME FUNCIONO MUY BIEN CLARO CON ALGUNOS CAMBIOS PERO EXCELENTE, LO NECESITABA PARA UN SISTEMA

  7. Daniel Fierro dice:

    Y si yo tengo esos valores dentro de una tabla construida con un while en php como podría hacer esta actualización por cada campo de la tabla?

  8. Dieter dice:

    como se haría para enviar dos o más variables en el data: de ajax. He probado a poner-> data: dataString,dataString2, pero no parece funcionar. Gracias

  9. Oscar B. dice:

    Hola.

    Muchas gracias por tu aporte. Muy bueno.
    Aprovechando tu código, yo quiero consultar cada x minutos un campo de la base de datos y mostrarlo. La primera vez, inicializo esa variable con el valor del campo de la BBDD. Ese campo ya se actualiza por otro procedimiento, con lo cual no tengo que realizar ningún tipo de operación con él.
    No se en que parte me he perdido, pero no soy capaz de que me refresque contenido de esa variable.
    ¿alguna sugerencia?

  10. Ricardo dice:

    hola jose , necesito tu ayuda no se si este código me pueda ayudar

    ejemplo:

    tengo una variable

    $total_iva = «200»;
    $total = number_format($total_iva,2,’.’,»);

    si quisiera que ese monto de 200 sea modificado por medio de ajax se podría hacer con este método o existe algún otro método ?

  11. Antonio dice:

    Con una solucion parecida a esta se podria consultar el contenido de un directorio del servidor cada X segundos?
    Es muy importante para mi gracias !

  12. wilson dice:

    como hago para mandar dos id no puedo.

  13. Juan Marcos dice:

    Undefined index: counter

  14. Tiny dice:

    Me manda error en la parte de span

  15. Tiny dice:

    Como debe ser la base de datos con solo un campo id_counter en la tabla counters

  16. Jai dice:

    Los counters, counter que son ?

    Son nombres de variables? Osea que pudiera poner cualquier otro tipo de variables?

  17. Luna dice:

    Hola, trate de hacer el ejemplo que muestras, pero la verdad no se que codigo es de q codigo, es decir, el codigo no tiene nombre…y pues me confundo por q no se a cual te refieras, x ejemplo onfig_mysqli.php… y la parte de include(‘../../config_mysqli.php’); no se si exportaste la bd o a que hace referencia? :/

    No se mucho de esto, x eso estas preguntas jeje.Saludos!

  18. Eduardo dice:

    Hola que tal, es posible tener un mas de un setInterval(), en un mismo documento?? no se trava a o no se cuelga? o cual seria la utilizacion correcta, ya que lo utilize en un sitio y la pagina se cuelga mucho… Gracias

  19. Luis Fernando dice:

    excelente tutorial amigo, gracias por tus aportes son muy útiles.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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

Ver más sobre