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.
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:
Autor
¿Buscas trabajo de programador?
31 respuestas a “Actualizar variable PHP cada x segundos con jQuery Ajax”
Deja una respuesta
43 artículos que te podrían interesar
Ver más sobre
No funciona
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.
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
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
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
Hola,
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
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.
Hola,
Si con lo que hay explicado en este tutorial ya te serviría inclusive modificando el total_iva en la base de datos.
Saludos
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
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
MUCHAS GRACIAS ME FUNCIONO MUY BIEN CLARO CON ALGUNOS CAMBIOS PERO EXCELENTE, LO NECESITABA PARA UN SISTEMA
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?
De la misma forma pero dentro del While estableciendo las variables dinámicas de cada iteración.
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
Hola,
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
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?
Hola,
Fíjate bien en el código que hay dentro del success y debes editarlo para que funcione bien para tu caso.
Saludos
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 ?
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 !
Efectivamente si
como hago para mandar dos id no puedo.
no acabo de entender que necesitas
Undefined index: counter
Me manda error en la parte de span
Como debe ser la base de datos con solo un campo id_counter en la tabla counters
Gracias!
Los counters, counter que son ?
Son nombres de variables? Osea que pudiera poner cualquier otro tipo de variables?
hola, en este caso concreto el counter es un campo de la tabla que estamos utilizando para la cantidad de visitas. Saludos
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!
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
excelente tutorial amigo, gracias por tus aportes son muy útiles.