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

I'm trying to reload a JSON file every 10 seconds with JQUERY.

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

The page is here: http://moemonty.com/chirp/chirp.html

该页面位于：http：//moemonty.com/chirp/chirp.html

The Code is here:

守则在这里：

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

It doesn't seem to be working.

它似乎没有工作。

4 个解决方案

#1

You probably want the previous set of returned data replaced by the new set, instead of appending it. In that case, using jQuery you can do:

您可能希望先前的一组返回数据被新集替换，而不是附加它。在这种情况下，使用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>

etc...

等等...

#2

I would expect the loop to work as quoted, but there could be a subtlety around the fact you're using JSONP. I would change the setTimeout call to:

我希望循环可以作为引用工作，但是你可能会使用JSONP。我会将setTimeout调用更改为：

setTimeout(loadChirp, 5000);

...for a couple of reasons. First off, using the function reference rather than a code string is a better idea generally, and second off, you're quite certain that you're getting the right function reference (whereas with the string, what reference you get depends on the context in which the code is executed).

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

But as Pointy pointed out in a comment, there's a separate issue: document.write will not do what you probably want it to do there. You can only use document.write to write to the HTML stream that's being parsed as part of the original page load. After the page load, you can't use it anymore. Consider using jQuery's append or appendTo and similar functions to add to the DOM after page load.

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

#3

You have an error in console.log(data.query.results.json); - console is not defined. Also, you can use setInterval( "function()", 5000 );.

你在console.log（data.query.results.json）中有错误; - 未定义控制台。此外，您可以使用setInterval（“function（）”，5000）;.

#4

You should definitely use:

你一定要用：

setInterval("loadChirp", 10000):

setInterval（“loadChirp”，10000）：

Don't write loadCrirp() inside setInterval as we're only passing a refrence

不要在setInterval中写入loadCrirp（），因为我们只传递了一个引用

#1