Javascript 如何每 10 秒使用 AJAX 重新加载 JSON
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3804097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reload JSON with AJAX every 10 Seconds
提问by Moemonty
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.
它似乎不起作用。
回答by vls
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...
等等...
回答by T.J. Crowder
I would expect the loopto work as quoted, but there could be a subtlety around the fact you're using JSONP. I would change the setTimeoutcall 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.writewill not do what you probably want it to do there. You can only use document.writeto 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 appendor appendToand similar functions to add to the DOM after page load.
但正如 Pointy 在评论中指出的那样，还有一个单独的问题：document.write不会做你可能希望它在那里做的事情。您只能用于document.write写入被解析为原始页面加载的一部分的 HTML 流。页面加载后，您不能再使用它。考虑使用 jQueryappend或appendTo类似的函数在页面加载后添加到 DOM。
回答by o15a3d4l11s2
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 );.
回答by coderMonkey
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() 因为我们只是传递一个引用
