Javascript 如何使用AJAX每隔10秒重新加载JSON_Javascript_Jquery_Ajax_Json

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

javascript jquery ajax json

Javascript 如何使用AJAX每隔10秒重新加载JSON,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我正在尝试使用JQUERY每隔10秒重新加载一个JSON文件页面如下：代码如下： <html> <head> <title>the title</title>  <script type="text/javascript" src="./js/jquery-1.4.2.js"></script> <!-- jquery libr

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

页面如下：

代码如下：

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


标题
$.ajaxSetup（{cache:false}）//不允许使用caching，因此信息应该是新的
函数loadChirp（）{//start函数
变量url=”http://www.chirpradio.org/json";
$.getJSON（“http://query.yahooapis.com/v1/public/yql?q=select%20*%20来自%20json%20其中%20url%3D%22“+url+%22&format=json&callback=？”，
功能（数据）{
log（data.query.results.json）；
document.write（'艺术家是：'+data.query.results.json.artist+'

'）；
document.write（'艺术家是：'+data.query.results.json[“记录标签”]+'

'）；
document.write（'相册是：'+data.query.results.json.album+'

'）；
document.write（'记录标签为：'+data.query.results.json[“记录标签”]+'

'）；
document.write（'反馈链接是：'+data.query.results.json[“反馈链接”]+'

'）；
document.write（'数据库id为：'+data.query.results.json[“数据库id”]+'

'）；
document.write（'时间为：'+data.query.results.json.timestamp.time+''）；
document.write（data.query.results.json.timestamp[“am-pm”]+'

'）；
document.write（'当前dj为：'+data.query.results.json[“当前dj”]+'

'）；
setTimeout（“loadChirp（）”，5000）；
警报（“超时已触发”）；
}); 
}//结束函数
$（文档）.ready（函数（）{
//文件准备功能
loadChirp（）；
}); 
//文件准备功能

它似乎不起作用。

我希望循环能像引用的那样起作用，但使用JSONP可能有一个微妙之处。我会将
setTimeout
调用更改为：

setTimeout(loadChirp, 5000);
…有几个原因。首先，一般来说，使用函数引用而不是代码字符串是一个更好的主意，其次，您非常确定您得到了正确的函数引用（而使用字符串，您得到的引用取决于代码执行的上下文）

但正如Pointy在一篇评论中指出的那样，还有一个单独的问题：
document.write
不会做您可能希望它做的事情。您只能使用
document.write
写入作为原始页面加载的一部分进行解析的HTML流。页面加载后，您将无法再使用它。考虑使用jQuery的或类似的函数在页面加载后添加到DOM。
< p>您在<代码>控制台中有一个错误。log（Data .Query，Real.jSON）；<代码>-未定义控制台。
此外，还可以使用
setInterval（“function（）”，5000）您可能希望以前的返回数据集替换为新的数据集，而不是附加它。在这种情况下，使用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> 函数loadChirp（）{ $.getJSON（“http://query.yahooapis.com/v1/public/yql?q=select%20*%20来自%20json%20其中%20url%3D%22“+url+%22&format=json&callback=？”，功能（数据）{ $（'#content'）.html（'艺术家是：'+data.query.results.json.artist+' '）； }); setTimeout（“loadChirp（）”，5000）； } 等等。您一定要使用：设置间隔（“加载啁啾”，10000）：不要在setInterval中写入loadCrirp（），因为我们只是传递一个引用似乎不起作用，这不是一个非常精确的问题描述。预期的结果是什么，实际的结果是什么（错误消息，HTTP状态码）？发生了什么？而且，即使超时代码确实有效，我也不认为所有那些document.write 调用都会执行您希望它们执行的操作。控制台将在许多浏览器（Firefox，Chrome，…）上定义，而不是在IE上。我猜如果他在使用它，他会在支持它的地方使用浏览器。更具体地说，如果你使用setInterval，在document ready上调用它，而不是在函数本身内部。“不要在setInterval内写loadCrirp（），因为我们只传递引用”，那么为什么你的示例仍然传递字符串？您需要删除引号来传递对函数的引用；否则，setInterval 将对字符串求值，这将无效（例如，它不会调用函数）应设置超时（loadChirp，5000）将字符串传递到setTimeout 或setInterval 中几乎是不合适的。问题是每10秒重新加载一次，所以应该是：setInterval（loadChirp，10000）；应设置超时（loadChirp，10000）；在loadChirp函数上不带（）或“”。调用带有执行“（）”的函数应该会引发可怕的递归。这被认为是一件昂贵的事情还是正常的事情？我有一个类似的情况，当按下播放按钮时，我需要更新一个表，它应该一直从api获取数据，直到按下停止按钮为止（这与web服务中是否有新数据无关）。