2010-09-27 16 views
7

Sto tentando di ricaricare un file JSON ogni 10 secondi con JQUERY.Come ricaricare JSON con AJAX ogni 10 secondi

la pagina è qui: http://moemonty.com/chirp/chirp.html

Il Codice è qui:

<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> 

Non sembra funzionare.

+2

* non sembra funzionare * è no t una descrizione del problema molto precisa. Qual è il risultato previsto, qual è il risultato effettivo (messaggio di errore, codice di stato HTTP)? –

+0

Beh, cosa * succede * succede? – Pointy

+1

Inoltre, anche se il codice di timeout funzionasse, non credo che tutte quelle chiamate di 'document.write' faranno ciò che si vuole che facciano. – Pointy

risposta

11

Probabilmente vorrete sostituire il set precedente di dati restituiti con il nuovo set, invece di aggiungerlo. In questo caso, utilizzando jQuery si può fare:

<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> 

ecc ...

+2

Buona risposta, ma 'setTimeout (" loadChirp() ", 5000);' dovrebbe essere 'setTimeout (loadChirp, 5000);' Non è quasi mai appropriato passare una stringa in 'setTimeout' o' setInterval'. –

+1

la domanda era di ricaricare ogni 10 secondi, quindi dovrebbe essere: setInterval (loadChirp, 10000); – George

+0

Dovrebbe essere setTimeout (loadChirp, 10000); senza() o "" nella funzione loadChirp. Chiamare la funzione con l'esecuzione "()" dovrebbe scatenare una ricorsione orribile. –

3

mi aspetterei il ciclo a lavorare come citato, ma ci potrebbe essere una sottigliezza intorno al fatto che si sta utilizzando JSONP. Vorrei cambiare la chiamata setTimeout a:

setTimeout(loadChirp, 5000); 

... per un paio di motivi. Prima di tutto, usare la funzione di riferimento piuttosto che una stringa di codice è un'idea migliore in generale, e in secondo luogo, sei certo che stai ricevendo il giusto riferimento alla funzione (mentre con la stringa, quale riferimento ottieni dipende dal contesto in cui viene eseguito il codice).

Ma come sottolineato da Pointy in un commento, c'è un problema a parte: document.write non farà ciò che probabilmente si vorrebbe che facesse lì. Puoi utilizzare document.write solo per scrivere nello stream HTML che viene analizzato come parte del caricamento della pagina originale. Dopo il caricamento della pagina, non puoi più usarlo. Prendi in considerazione l'utilizzo di jQuery append o appendTo e funzioni simili da aggiungere al DOM dopo il caricamento della pagina.

+0

Downvoter: cosa mi manca? –

0

Si è verificato un errore in console.log(data.query.results.json); - la console non è definita. Inoltre, è possibile utilizzare setInterval("function()", 5000);.

+1

'console' sarà definito su molti browser (Firefox, Chrome, ...), e non su IE. Sto indovinando se lo sta usando, sta usando un browser in cui è supportato. –

+1

Giusto per essere più specifici, se si utilizza setInterval, chiamarlo su documento pronto, non all'interno della funzione stessa. – o15a3d4l11s2

0

si dovrebbe assolutamente utilizzare:

setInterval ("loadChirp", 10000):

Non scrivere loadCrirp() all'interno di setInterval perché stiamo passando solo un refrence

+0

* "Non scrivere loadCrirp() all'interno di setInterval poiché stiamo passando solo un refrence" * Allora perché il tuo esempio passa ancora una stringa? È necessario rimuovere le virgolette per passare un riferimento alla funzione; altrimenti, 'setInterval' valuterà la stringa, che non avrà alcun effetto (non chiamerà la funzione, ad esempio). –

Problemi correlati