Question

如何使用Jquery在一段时间后刷新特定元素的内容而不是整页？

当我使用下面显示的代码时，它只在定义的持续时间后多次附加相同的数据，但我不想这样，我只想在用户在mysql中插入任何新数据时附加数据。

setInterval(function(){
    $.ajax({
        url:"confess_show.php",
        type:"GET",
        dataType:"html",
        success:function(data){
            $('.content').append(data);
        }
    });
}, 6000);

Answer 1

尝试使用： -

JS

 $(document).ready(function() {
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php');
      //OR THIS WAY : $("#responsecontainer").load('response.php?randval='+ Math.random());

   }, 5000);
   $.ajaxSetup({ cache: false });
});

HTML

<div id="responsecontainer"></div>

创建一个文件＆＃34; response.php＆＃34;并在那里添加php脚本，它会在每5秒后加载一次php代码（5000 = 5秒）

Answer 2

我会使用时间戳，因为它不需要获取每次更新的最新插入ID。

var timestamp = 0;

setInterval(function(){
    $.ajax({
        url:"confess_show.php?t=" + timestamp,
        type:"GET",
        dataType:"html",
        success:function(data){
            if(data != ''){ //Only append data if there are some new
                timestamp = Math.round((new Date()).getTime() / 1000); //Set timestamp to current time
                $('.content').append(data);
            }
        }
    });
}, 6000);

然后，

confess_show.php只应获取时间戳大于$ _GET [＆＃39; t＆＃39;]的行。这样，您就不需要跟踪显示的最新ID。

Answer 3

更改行：

$('.content').append(data);

到

$('.content').html(data);

Answer 4

我认为您可能需要append，但不是replace。

所以，如果在这种情况下，你应该记得你去哪里。

我只是举个例子：

// remember the last id fetched.
var last_id = 0;

setInterval(function(){
    $.ajax({
        // here, send the last_id, and only fetch data newer than that.
        url: "confess_show.php?newer_than="+last_id,
        type: "GET",
        dataType: "html",
        success: function(data){
            // also, here, after data was fetched, update the last_id with the latest one.
            last_id = getLastId(data);
            $('.content').append(data);
        }
    });
}, 6000);

Answer 5

可能是这样的：

setInterval(function(){
    $.ajax({
        url:"confess_show.php",
        type:"GET",
        dataType:"html",
        success:function(data){
            if($('#yourDataWrapperId').length == 0){ //check if data exist
                $('.content').append(data);
            }
        }
    });
}, 6000);

在jquery </div>中仅自动刷新页面的特定<div>元素

5 个答案: