logo标签列表

AJAX jQuery每5秒刷新div

javascriptphpjqueryajax
29

我从一个网站上得到了这段代码，我已经根据自己的需求进行了修改：

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>

<div id="links">

</div>

<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 5000);

function reloadChat () {
$('#links').load('test.php #links',function () {
        $(this).unwrap();
        timeout = setTimeout(reloadChat, 5000);
});
}
</script>

在test.php中：

<?php echo 'test'; ?>

我希望每5秒钟调用test.php并在links div中显示，应该如何正确实现？

你是否正在包含 jQuery 库？ - Utkarsh Dixit
是的，我已经在头部引入了<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>。 - user3838972
你正在使用旧版本的jQuery，请尝试使用最新版本<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>。 - Kanishka Panamaldeniya
AJAX轮询是一种反模式，应该尽量避免使用。它不是可扩展的解决方案，并且会在最小并发负载下导致服务器性能问题。当您需要保持客户端/服务器端数据紧密同步时，更好的解决方案是使用观察者模式，例如WebSockets。 - Rory McCrossan
5个回答
59

试一下这个。

function loadlink(){
    $('#links').load('test.php',function () {
         $(this).unwrap();
    });
}

loadlink(); // This will run on page load
setInterval(function(){
    loadlink() // this will run after every 5 seconds
}, 5000);

希望这能有所帮助。
1
更新了我的答案，加上了 $(this).unwrap();。这样你就不需要 timeout = setTimeout(reloadChat, 5000); 了。 - Yunus Aslam
它不起作用，http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js 是正确的库吗？ - user3838972
哦，等一下，它正在运行，谢谢🙂但是“测试”在页面加载后5秒钟出现，有没有办法在立即加载时刷新每5秒呢？ - user3838972
TIL unwrap() 是一个东西。感谢上帝。 - Daan
1
@rupesh，你能否告诉我另一种从服务器获取新数据的方法而不需要向服务器发送请求吗？如果要求每5秒刷新一次。谢谢！ - Yunus Aslam
显示剩余3条评论
7
尝试使用setInterval，包含jquery库，只需尝试删除unwrap()即可。
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

var timeout = setInterval(reloadChat, 5000);    
function reloadChat () {

     $('#links').load('test.php');
}
</script>

更新

你正在使用旧版本的jQuery，请包含最新版本的jQuery。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
这个脚本可以工作，但是在最开始的几秒钟内 div 中没有内容。能否在页面加载时也加载内容？ - Bombelman
5

尽量避免使用setInterval函数。
在成功响应后，您可以使用超时重新向服务器发送请求。
jQuery代码如下：

sendRequest(); //调用此函数

function sendRequest(){
    $.ajax({
        url: "test.php",
        success: 
        function(result){
            $('#links').text(result); //insert text of test.php into your div
            setTimeout(function(){
                sendRequest(); //this will send request again and again;
            }, 5000);
        }
    });
}
1
你能否解释一下为什么不用setInterval？ - Tikky
这个答案导致了另一个答案 https://dev59.com/6W445IYBdhLWcg3wE2Ne#5052661，建议将其从“success”移动到“complete”。已点赞。 - luke_mclachlan
3
<script type="text/javascript">
$(document).ready(function(){
  refreshTable();
});

function refreshTable(){
    $('#tableHolder').load('getTable.php', function(){
       setTimeout(refreshTable, 5000);
    });
}
</script>
3

你可以使用这个。

<div id="test"></div>

你的JavaScript代码应该像这样。
setInterval(function(){
      $('#test').load('test.php');
 },5000);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接