每次在mysql数据库中插入新记录时刷新div

Question

我正在网页上的 SCADA 系统上工作，并且仅在 mysql 数据库中的 2 个表中的任何一个发生更改时才想用 gif 刷新某些 div。

而且我也想在每次发生更改时都这样做（表中的新记录）。 当这 2 个表保持不变时，不应执行任何操作（无新记录）。

整个网页都是 php/html，这是我第一次使用 javascript/ajax。 我试过使用：

  setInterval($('. examplediv).load(location.href + ' .examplediv), 1000);

但它不适合我的需要。它使我的图形在每次刷新时都会闪烁，而它们应该是静态的。 为了简化：我只想在表中的状态从 a->b 更改时重新加载它们，所以我将 a.gif 与 b.gif 交换。

我可以通过以下方式检测 mysql 表的变化：记录 ID、时间戳或表校验和，但很难使用 javascript。

<div class="refresh"> // div i want to refresh
  <h3>PIR</h3>        // sensor name
  <p>Online: <?echo $aonline;?></p>  // echoing result of query if  sensor is online
  <p>State: <?echo $pirstan;?></p>      // echoing current state of  sensor
  <p>Last changed: <?echo $rowpir['Czas'];?></p>  //echoing timestamp of previous state of sensor
   <img class="center" src="pir.gif" alt="Kontrakton"> // showing image related to current sensor state (for example walking person to PIR sensor)
  </div>

任何有关上述问题的帮助都将不胜感激。 尤其是带有 cmets 的示例代码，所以我理解这件事。 也欢迎其他解决问题的方法，也许我是短视的。

Answer 1

对于那些对未来感兴趣的人，最终代码感谢：Fiido93

<script type="text/javascript">
var old_count = 0;
setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "test.php",
        success : function(data){
            if (data > old_count) {
                   $('.divname' ).load(window.location.href + ' .divname');
               old_count = data;
           }
        }
    });
},1000);

和test.php

$result = mysqli_query($conn,"mysqlquery");
while($row = mysqli_fetch_array($result))
{
    $printme= $row[0];   // i only echo row 0 here !!
} 
echo "$printme";

Answer 2

您可以使用 websocket 或 socket.io 来解决您的问题示例：

当您的客户获得信息时 可以直接打ajax调用

socket.on('notification', function(){
  ajaxFunction();
});

如果你不想你这个方法。 p/s 这只是一个建议。执行验证获取旧行数据并比较后端中的新行数据。

通过js

<script>

var old_count = 0;

setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "test.php",
        success : function(data){
            if (data > old_count) {
                alert('new record on i_case');
                old_count = data;
            }
        }
    });
},1000);

</script>