2010-09-27 20 views
7

Estoy tratando de volver a cargar un archivo JSON cada 10 segundos con JQUERY.Cómo recargar JSON con AJAX cada 10 segundos

la página está aquí: http://moemonty.com/chirp/chirp.html

El Código está aquí:

<html> 
<head> 
<title>the title</title> 
<!-- included Jquery Library --> 
    <script type="text/javascript" src="./js/jquery-1.4.2.js"></script> 
<!-- jquery library --> 
    </head> 
<body> 
<script> 

$.ajaxSetup({ cache: false }); //disallows cachinge, so information should be new 


function loadChirp(){ //start function 

var url = "http://www.chirpradio.org/json"; 
     $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22"+url+"%22&format=json&callback=?", 
      function(data){ 
      console.log(data.query.results.json); 

       document.write('The artist is: ' + data.query.results.json.artist + '<br/><br/>'); 

       document.write('The artist is: ' + data.query.results.json["record-label"] + '<br/><br/>'); 

       document.write('The album is: ' + data.query.results.json.album + '<br/><br/>'); 

       document.write('The record label is: ' + data.query.results.json["record-label"] + '<br/><br/>'); 

       document.write('The feedback link is: ' + data.query.results.json["feedback-link"] + '<br/><br/>'); 

       document.write('The database id is: ' + data.query.results.json["database-id"] + '<br/><br/>'); 

       document.write('The time is: ' + data.query.results.json.timestamp.time + ' '); 

       document.write(data.query.results.json.timestamp["am-pm"] + '<br/><br/>'); 

       document.write('The current dj is: ' + data.query.results.json["current-dj"] + '<br/><br/>'); 


       setTimeout("loadChirp()",5000); 
       alert('The timeout was triggered.'); 

      }); 

} //end function   


$(document).ready(function(){ 
//DOCUMENT READY FUNCTION 
    loadChirp(); 
}); 
//DOCUMENT READY FUNCTION 


</script> 
</body> 
</html> 

No parece estar funcionando.

+2

* no parece estar funcionando * no es t una descripción del problema muy precisa. ¿Cuál es el resultado esperado, cuál es el resultado real (mensaje de error, código de estado HTTP)? –

+0

Bueno, ¿qué pasa *? – Pointy

+1

Además, incluso si el código de tiempo de espera no funcionó, no creo que todas esas llamadas 'document.write' harán lo que usted quiere que hagan. – Pointy

Respuesta

11

Es probable que desee que el conjunto anterior de datos devueltos sea reemplazado por el nuevo conjunto, en lugar de anexarlo. En ese caso, el uso de jQuery que puede hacer:

<div id='content'></div> 
<script> 
    function loadChirp(){ 
     $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22"+url+"%22&format=json&callback=?", 
       function(data) { 
        $('#content').html('The artist is: ' + data.query.results.json.artist + '<br/><br/>'); 
       }); 
     setTimeout("loadChirp()",5000); 
     } 
</script> 

etc ...

+2

Buena respuesta, pero 'setTimeout (" loadChirp() ", 5000);' debe ser 'setTimeout (loadChirp, 5000);' Casi nunca es apropiado pasar una cadena a 'setTimeout' o' setInterval'. –

+1

la pregunta era volver a cargar cada 10 segundos, por lo que debería ser: setInterval (loadChirp, 10000); – George

+0

Debe setTimeout (loadChirp, 10000); sin() o "" en la función loadChirp. Llamar a la función con la ejecución "()" debería desencadenar una recursión horrible. –

3

Esperaría que el bucle funcione como se cita, pero podría haber una sutileza en torno al hecho de que está utilizando JSONP. Me gustaría cambiar la llamada a setTimeout:

setTimeout(loadChirp, 5000); 

... por un par de razones. En primer lugar, utilizar la referencia de función en lugar de una cadena de código es una mejor idea en general, y segundo, está bastante seguro de que obtiene la referencia de función correcta (mientras que con la cadena, qué referencia obtiene depende del contexto en el que se ejecuta el código).

Pero como puntualizó Pointy en un comentario, hay un problema por separado: document.write no hará lo que probablemente quiera que haga allí. Solo puede usar document.write para escribir en la secuencia HTML que se está analizando como parte de la carga de la página original. Después de cargar la página, ya no puedes usarla. Considere la posibilidad de utilizar jQuery's append o appendTo y funciones similares para agregar al DOM después de la carga de la página.

+0

Downvoter: ¿Qué me estoy perdiendo? –

0

Tiene un error en console.log(data.query.results.json); - la consola no está definida. Además, puede usar setInterval("function()", 5000);.

+1

'console' se definirá en muchos navegadores (Firefox, Chrome, ...) y no en IE. Supongo que si lo está usando, está usando un navegador donde es compatible. –

+1

Para ser más específico, si usa setInterval, llámelo en el documento listo, no dentro de la función misma. – o15a3d4l11s2

0

además se debería utilizar:

setInterval ("loadChirp", 10000):

No escriba loadCrirp() dentro de setInterval ya que solo aprobamos una referencia

+0

* "No escriba loadCrirp() dentro de setInterval ya que solo aprobamos una referencia" * Entonces, ¿por qué su ejemplo todavía pasa una cadena? Debe eliminar las comillas para pasar una referencia a la función; de lo contrario, 'setInterval' evaluará la cadena, que no tendrá ningún efecto (no llamará a la función, por ejemplo). –

Cuestiones relacionadas