如何每10秒用AJAX重新加载JSON

时间:2010-09-27 13:11:00

标签: javascript jquery ajax json

我正在尝试使用JQUERY每10秒重新加载一个JSON文件。

页面位于:http://moemonty.com/chirp/chirp.html

守则在这里:

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

它似乎没有用。

4 个答案:

答案 0 :(得分:12)

您可能希望先前的一组返回数据被新集替换,而不是附加它。在这种情况下,您可以使用jQuery:

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

等...

答案 1 :(得分:3)

我希望循环能够作为引用工作,但是你可能会使用JSONP这一事实。我会将setTimeout调用更改为:

setTimeout(loadChirp, 5000);

...有几个原因。首先,使用函数引用而不是代码字符串通常是一个更好的主意,其次,你很确定你正在获得正确的函数引用(而对于字符串,你得到的引用取决于上下文其中执行代码。)

但正如Pointy在评论中指出的那样,还有一个单独的问题:document.write不会做你可能希望它在那里做的事情。您只能使用document.write写入正在作为原始页面加载的一部分进行分析的HTML流。页面加载后,您不能再使用它了。考虑使用jQuery的appendappendTo以及类似的函数在页面加载后添加到DOM中。

答案 2 :(得分:0)

console.log(data.query.results.json);中有错误 - 未定义控制台。 此外,您可以使用setInterval( "function()", 5000 );

答案 3 :(得分:0)

你绝对应该使用:

  

setInterval(“loadChirp”,10000):

不要在setInterval中写入loadCrirp(),因为我们只传递了一个参考