1。两个电话。

Question

我有一个div从另一个页面重新加载数据。代码如下所示：

var auto_refresh = setInterval(
  function() {
    $('#mydiv').load('load.php');
  }, 1000); // refresh every 1000 milliseconds

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div id="mydiv">
  <?php echo 'loading...';?>
</div>

这非常适合刷新我的数据。但是，我真的不希望它每隔1000毫秒刷新一次div，我希望它检查是否有任何改变，如果是，那么刷新div。

例如：

$current_vericode = 'kdsjfkdfj';

$sql = "SELECT\n".
"   vericode\n".
"FROM\n".
"   users\n".
"WHERE\n".
"   users.id = 3";

    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $new_vericode = $row["vericode"];
        }
    }

if ($current_vericode == $new_vericode)
{
    //don't refresh the div
} else {
    //refresh it and...
    //$current_vericode = $new_vericode
}

这种方式发生的一切就是它检查mysql以查看指定的字段是否已更改。如果没有那么它什么都不做。如果有，那么它将刷新div并更新代码。

据我所知，效果与不断更新相同，但我真的想添加表单和内容，我可以用它来更新，直到mysql字段发生变化。

所以每1000毫秒，检查mysql并将其与当前值进行比较。如果它们相同则结束/退出。如果它们已更改，则刷新并将新值保存为当前值。

有什么想法吗？

Answer 1

您可以通过两种方式执行此操作：

1。两个电话。

第一个调用检查是否需要使用时间戳或版本计数器重新加载最后一个正常版本。

var auto_refresh = setInterval(
  function() {
    $.post('check-load.php').done(function(reply) {
        if (reply.timestamp < $('#mydiv').attr('timestamp')) {
            return;
        }
        $('#mydiv').load('load.php').attr({ timestamp: reply.timestamp });
    });
  }, 1000); //

2。一个电话

这里HTML是在每次调用时生成的，但只在需要时才真正加载。它每次都会被下载。

  function() {
    $.post('check-load.php').done(function(reply) {
        if (reply.timestamp < $('#mydiv').attr('timestamp')) {
            return;
        }
        $('#mydiv').html(reply.html).attr({ timestamp: reply.timestamp });
    });
  }, 1000); //

在第二种情况下，您发送的JSON也包含生成页面的HTML。

如果加载检查很容易并且HTML生成缓慢，那么您应该使用第一种方法。如果流量有问题，第一种方法更好。

// check-load（使用HTML）

以前的代码让MySQL生成时间戳，并在时间戳更改时重新加载DIV。下面的代码更接近你的代码：

$current_vericode = 'kdsjfkdfj';

$sql = 'SELECT vericode FROM users WHERE users.id = :id';

$rs  = $conn->prepare($sql);
$rs->execute([ ':id' => 3 ]); // or Array(':id' => 3) with older PHPs

...

if ($current_vericode == $new_vericode) {
    $reply = [ 'refresh' => 'no' ];
} else {
    $reply = [ 'refresh' => 'yes', 'html' => '<p>HELLO WORLD</p>' ];
}

Header('Content-Type: application/json;charset=utf-8');
die(json_encode($reply));

但是现在jQuery代码必须稍微改变才能阅读.refresh：

    $.post('check-load.php').done(function(reply) {
        if (reply.reload === 'yes') {
            $('#mydiv').html(reply.html);
        }
    });

史蒂夫的建议

上面，我们将整个套件和kaboodle发送到DIV中。这是浪费带宽，它会强制客户端始终加载相同的HTML，除非您发送一些代码或分析用户代理以告知客户分开。

该DIV中显示的内容是什么？您可以使用Handlebars填充模板。说它只是时间，日期和新的vericode：

if ($current_vericode == $new_vericode) {
    $reply = [ 'refresh' => 'no' ];
} else {
    $reply = [ 'refresh' => 'yes', 'time' => date('H:i:s'), 'auth' => $vericode ];
}

并且在jQuery中（Handlebars会更好，即使它对于一个小DIV来说也有点过头了）：

$('#mydiv').empty().append(
    $('<p>').text(reply.time)
).append(
    $('<p>').text('New authcode: ' + reply.vericode)
);

Answer 2

这是我最终做的事情：

    $i = 1;
var auto_refresh = setInterval(function() {
    $.get("data.php?user_id=3", function(data) {
        //condition of data
        if (data != $i) {
            $('#gantt').load('dash_includes/dash_display_gantt.php').fadeIn("slow");
            $('#all_bookings_div').load('dash_includes/dash_display_all_bookings.php').fadeIn("slow");
            $('#secondary-sidebar').load('dash_includes/secondary_sidebar.php').fadeIn("slow");
            $i = data;
        }
    });
}, 5000);

所以在data.php上它回显了一个日期时间。当我需要刷新div时，我会更新日期时间。每隔5000毫秒，它将检查日期时间是否已更改，如果是，则刷新div并将该日期时间保存为$ i。如果日期时间没有改变或者在$ i之前，那么它将不会做任何事情。

感谢您的帮助。

如果变量已更改，则仅限Ajax刷新Div

2 个答案:

1。两个电话。

2。一个电话

史蒂夫的建议