Recargar datos AJAX cada X minutos/segundos, jQuery

Programé un CMS que tiene un registro de quién ha iniciado sesión recientemente en el sistema. Actualmente, estos datos se envían a una pestaña jQuery UI a través de Ajax. Me gustaría poner esta información en una barra lateral en la página principal y cargarla a través de AJAX cada 30 segundos (o un período de tiempo determinado).Recargar datos AJAX cada X minutos/segundos, jQuery

¿Cómo voy a hacer esto? ¿La respuesta PHP necesita ser codificada JSON? Soy bastante nuevo en los datos de AJAX y JSON.

Aquí es el PHP Actualmente estoy usando para tirar de datos de los usuarios mesa-

<?php 
$loginLog = $db->query("SELECT name_f, name_l, DATE_FORMAT(lastLogin, '%a, %b %D, %Y %h:%i %p') AS lastLogin FROM user_control ORDER BY lastLogin ASC LIMIT 10"); 
while ($recentLogin = $loginLog->fetch()) { 
echo $recentLogin['name_f'] . " " . $recentLogin['name_l'] . " - " . $recentLogin['lastLogin']; 
} 
?>

Gracias! ACTUALIZACIÓN

Vale, esto es lo que tengo hasta ahora .. la parte que estoy atascado en es la forma de bucle a través de JSON y lo inserta en la caja. Funciona bien siempre que use solo un resultado y asegure que no está en []. Estoy aprendiendo Ajax y JSON, por alguna razón no me llega demasiado fácilmente.

Javascript -

$(document).ready(function(){ 

       function refreshUsers(){ 

        $.getJSON('json.php', function(data) { 

          for (var i = 0; i < data.length; i++) { 

           $("#loadHere").html('<p>' + data.name + ' ' + data.lastLogin + '</p>'); 

          } 

       }); 

      } 

       var refreshInterval = setInterval(refreshUsers, 30 * 1000); 

       refreshUsers(); 

      });

Lo que mis salidas de script PHP -

[{"name":"Joe Smith","lastLogin":"Fri, May 21st, 2010 08:07 AM"},{"name":"Jane Doe","lastLogin":"Fri, May 21st, 2010 07:07 AM"}]

Gracias!

Fuente

2010-05-21 NightMICU

lado de PHP, use json_encode().

lado del cliente, utilice $.getJSON():

function refreshUsers(){ 
    $.getJSON(url, postData, function (data, textStatus){ 
    // Do something with the data 
    }); 
} 

// Keep interval in a variable in case you want to cancel it later. 
var refreshInterval = setInterval(refreshUsers, 30 * 1000);

con estos 2, se debe tener mucho para empezar con. Más que esto, nos pedirías que trabajáramos para ti :)

Fuente

2010-05-21 12:23:46 Seb

Gracias por su ayuda! Actualicé mi publicación original con lo que tengo hasta ahora. Atascado en intentar recorrer lo que pasa en JSON: soy nuevo en ambos loops en Javascript/jQuery, Ajax y JSON. ¡Gracias de nuevo! – NightMICU

¡Me alegro de poder ayudar! Si esta es la respuesta correcta, marque como aceptado para que otros con el mismo problema sepan cómo resolverlo. Con respecto al bucle, recuerda lo que tengas en PHP y codifica como JSON se comportará exactamente igual en el otro lado: si se trata de un objeto ab, puedes acceder a las propiedades en JS usando el operador '.'; si se tratara de una matriz, simplemente itere como lo haría en casi el lenguaje; 'datos [i]'. Tenga cuidado con los mapas en PHP: se convierten en objetos en JSON. – Seb

Bien, entonces pude descifrar cómo recorrer los datos de JSON y agregarlos al DIV apropiado usando .appendTo(). Pero lo que necesito es cargar los resultados de la tabla MySQL e insertarlos en la barra lateral DIV cada X segundos. El método de Mailslut en realidad parece ser mejor para esto: es simple recorrer la tabla con PHP e insertar ese HTML en el DIV. Entonces, mi pregunta: ¿cuál es la ventaja de JSON vs $ .load() para esta aplicación? ¿Cómo podría seguir usando JSON y agregar todos los resultados de la tabla al DIV sin agregarlos cada vez? ¡Gracias! – NightMICU

La manera más simple (si es la mejor manera es subjetiva, para el caso de uso que has presentado, diría que está bien) sería qué:

var updateInterval = setInterval(function() { 
    $('#whereIWantToDisplayIt').load('/thePathToThatScript.php'); 
},30*1000);

Cada 30 segundos, esto sería cargar la salida de su script PHP, y poner esa salida en el elemento con ID = whereIWantToDisplayIt

prefiero la respuesta de Seb sin embargo.

Fuente

2010-05-21 12:27:05

Usando 'load()' significa que el servidor debe saber cómo renderizar los resultados. En mi humilde opinión, sería mejor separar la presentación y dejar la parte HTML en el lado de JavaScript. Después de todo, este HTML no se usará si JS está deshabilitado. – Seb

Recargar datos AJAX cada X minutos/segundos, jQuery

Respuesta

Cuestiones relacionadas