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 ejem10/05/2014
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.
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:
Luis Fernando
Publicado el 16/06/2014 14:40excelente tutorial amigo, gracias por tus aportes son muy útiles.
Eduardo
Publicado el 19/01/2015 21:42Hola 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
Luna
Publicado el 29/04/2015 17:41Hola, 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!
Jai
Publicado el 03/03/2016 21:33Los counters, counter que son ?
Son nombres de variables? Osea que pudiera poner cualquier otro tipo de variables?
Jose Aguilar
Publicado el 08/03/2016 14:03hola, en este caso concreto el counter es un campo de la tabla que estamos utilizando para la cantidad de visitas. Saludos
Juan
Publicado el 15/03/2016 03:34Gracias!
Tiny
Publicado el 06/06/2016 14:21Como debe ser la base de datos con solo un campo id_counter en la tabla counters
Tiny
Publicado el 06/06/2016 14:22Me manda error en la parte de span
Juan Marcos
Publicado el 06/07/2016 00:36Undefined index: counter
wilson
Publicado el 31/10/2016 16:17como hago para mandar dos id no puedo.
Jose Aguilar
Publicado el 04/11/2016 16:39no acabo de entender que necesitas
Antonio
Publicado el 14/06/2017 22:56Con una solucion parecida a esta se podria consultar el contenido de un directorio del servidor cada X segundos?
Es muy importante para mi gracias !
Jose Aguilar
Publicado el 15/06/2017 14:20Efectivamente si
Ricardo
Publicado el 15/07/2017 16:17hola 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 ?
Oscar B.
Publicado el 17/07/2017 13:42Hola.
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?
Jose Aguilar
Publicado el 20/07/2017 23:16Hola,
Fíjate bien en el código que hay dentro del success y debes editarlo para que funcione bien para tu caso.
Saludos
Dieter
Publicado el 01/09/2017 08:47como 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
Jose Aguilar
Publicado el 07/09/2017 08:28Hola,
Quizá te pueda resultar útil usar json donde puedes retornar al javascript un objeto con varios datos. Tenemos un artículo con un ejemplo sobre ello en:
https://www.jose-aguilar.com/blog/ajax-vs-json-respuesta-multiple/
Saludos
Daniel Fierro
Publicado el 18/04/2018 22:03Y 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?
Jose Aguilar
Publicado el 19/04/2018 19:32De la misma forma pero dentro del While estableciendo las variables dinámicas de cada iteración.
RAUL RODRIGUEZ
Publicado el 23/04/2018 05:29MUCHAS GRACIAS ME FUNCIONO MUY BIEN CLARO CON ALGUNOS CAMBIOS PERO EXCELENTE, LO NECESITABA PARA UN SISTEMA
Antonio Aranzana
Publicado el 05/09/2018 17:54Hola 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
Publicado el 06/09/2018 10:48Hola,
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
Melvin Pérez
Publicado el 20/11/2018 02:34Hola 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.
Jose Aguilar
Publicado el 20/11/2018 18:37Hola,
Si con lo que hay explicado en este tutorial ya te serviría inclusive modificando el total_iva en la base de datos.
Saludos
NANCY
Publicado el 03/05/2019 22:28Hola 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
Jose Aguilar
Publicado el 06/05/2019 10:29Hola,
La única forma es que la variable que llega de la base de datos tenga el valor correcto para condicionarlo según sea necesario.
Saludos
Ronald
Publicado el 07/06/2019 16:13Esto 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
Erick
Publicado el 07/04/2021 01:25Hola 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
Publicado el 12/05/2021 06:52Hola,
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
Cristobal
Publicado el 27/08/2024 15:40No funciona