Ajax 仅在变量更改时刷新 Div

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 生成速度很慢，那么您应该使用第一种方法。如果交通有问题，第一种方法更好。

// 检查加载（使用 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，除非您发送一些代码或分析 User-Agent 以区分客户端。

要在该 DIV 中显示什么？您可以使用 Handlebars 来填充模板。说只是时间、日期和新的验证码：

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 之前，那么它不会做任何事情。

感谢您的所有帮助。