So laden Sie JSON alle 10 Sekunden mit AJAX

Ich versuche, eine JSON-Datei alle 10 Sekunden mit JQUERY neu zu laden.So laden Sie JSON alle 10 Sekunden mit AJAX

Die Seite ist hier: http://moemonty.com/chirp/chirp.html

Der Kodex ist hier:

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

Es ist nicht zu funktionieren scheint.

Quelle

2010-09-27 Moemonty

* scheint nicht zu funktionieren * ist nein t eine sehr genaue Problembeschreibung. Was ist das erwartete Ergebnis, was ist das tatsächliche Ergebnis (Fehlermeldung, HTTP-Statuscode)? –

Nun, was * passiert *? – Pointy

Auch wenn der Timeout-Code funktioniert hat, glaube ich nicht, dass all diese 'document.write'-Aufrufe tun werden, was sie tun sollen. – Pointy

Wahrscheinlich möchten Sie die vorherige Menge der zurückgegebenen Daten durch die neue Menge ersetzen, anstatt sie anzuhängen. In diesem Fall mit jQuery können Sie tun:

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

Quelle

2010-09-27 14:33:08 vls

Gute Antwort, aber 'setTimeout (" loadChirp() ", 5000);' sollte 'setTimeout (loadChirp, 5000);' Es ist fast nie angemessen, eine Zeichenfolge in 'setTimeout' oder' setInterval' zu übergeben. –

die Frage war, alle 10 Sekunden neu zu laden, so sollte es sein: setInterval (loadChirp, 10000); – George

Sollte setTimeout sein (loadChirp, 10000); ohne() oder "" in der loadChirp-Funktion. Der Aufruf der Funktion mit der Ausführung "()" sollte eine schreckliche Rekursion auslösen. –

Ich würde erwarten, dass die Schleife funktioniert wie zitiert, aber es könnte eine Feinheit sein, dass Sie JSONP verwenden. Ich würde den setTimeout Anruf ändern:

setTimeout(loadChirp, 5000);

... für ein paar Gründe. Zunächst einmal ist die Verwendung der Funktionsreferenz anstelle einer Codekette generell eine bessere Idee, und zweitens sind Sie ziemlich sicher, dass Sie die richtige Funktionsreferenz erhalten (während bei der Zeichenkette der Bezug, den Sie erhalten, vom Kontext abhängt in dem der Code ausgeführt wird).

Aber wie Pointy in einem Kommentar darauf hingewiesen, gibt es ein separates Problem: document.write wird nicht tun, was Sie wahrscheinlich wollen, dass es dort zu tun. Sie können document.write nur verwenden, um in den HTML-Stream zu schreiben, der als Teil des ursprünglichen Seitenladevorgangs analysiert wird. Nach dem Laden der Seite können Sie es nicht mehr verwenden. Erwägen Sie, die Funktionen append oder appendTo von jQuery und ähnliche Funktionen zu verwenden, um sie nach dem Laden der Seite zum DOM hinzuzufügen.

Quelle

2010-09-27 13:14:59

Downvoter: Was vermisse ich? –

Sie haben einen Fehler in console.log(data.query.results.json); - Konsole ist nicht definiert. Sie können auch setInterval("function()", 5000); verwenden.

Quelle

2010-09-27 13:15:14 o15a3d4l11s2

'Konsole' wird in vielen Browsern (Firefox, Chrome, ...) und nicht in IE definiert. Ich vermute, wenn er es benutzt, benutzt er einen Browser, wo es unterstützt wird. –

Nur um genauer zu sein, wenn Sie setInterval verwenden, rufen Sie es auf Dokument bereit, nicht innerhalb der Funktion selbst. – o15a3d4l11s2

Sie sollten auf jeden Fall verwenden:

setInterval ("loadChirp", 10000):

Schreiben Sie nicht loadCrirp() in setInterval, da wir nur eine Referenz übergeben

Quelle

2010-09-27 15:52:38 coderMonkey

* "Schreiben Sie loadCrirp() nicht in setInterval, da wir nur einen Verweis übergeben" * Warum übergibt Ihr Beispiel noch eine Zeichenfolge? Sie müssen die Anführungszeichen entfernen, um einen Verweis auf die Funktion zu übergeben. Andernfalls wird 'setInterval' die Zeichenfolge auswerten, die keine Auswirkung hat (die Funktion wird z. B. nicht aufgerufen). –

So laden Sie JSON alle 10 Sekunden mit AJAX

Antwort

Verwandte Themen