jquery ajax 在表重复的末尾添加 mysql 行答案

【问题标题】：jquery ajax adds mysql rows at the end of the table-repeatingjquery ajax 在表重复的末尾添加 mysql 行
【发布时间】：2020-08-16 09:05:35
【问题描述】：

我使用 ajax jquery 从 mysql 表数据填充一个表，以每隔一段时间刷新它的内容。我将时间设置为 1 秒。 html 不断重复现有表格末尾的表格。

这里是成功创建json数据的php文件。

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "esp_data";
$conn = new mysqli($servername,$username,$password,$dbname);
$myArray = array();
if ($result = $conn->query("SELECT * FROM sensordata")) {
    while($row = $result->fetch_array(MYSQLI_ASSOC)) {
            $myArray[] = $row;
    }
    echo json_encode($myArray);
}
$result->close();
$conn->close();
?>

这里是主索引文件

< !DOCTYPE html >
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script >
        var $myTable = $('#myTable')
       $(document).ready(function(){
          function getData() {
            var row = '';
            $.ajax({
              type: 'POST',
              url: 'data.php',
              dataType: 'json',
              success: function (data) {
                $.each(data, function (i, item) {
                  var row = $('<tr>');
                  row.append('<td>' + item.value1 + '</td>');
                  row.append('<td>' + item.value2 + '</td>');
                  row.append('<td>' + item.Driver + '</td>');
                  $('#myTable').append(row);
                });
              }
            });
          }
        getData();
        setInterval(function () {
          getData();
        }, 1000);  // it will refresh your data every 1 sec
       });
</script>
      <body>
        <div>
          <table id="myTable">
            <tr>
              <th>Lap</th>
              <th>Time</th>
              <th>Driver</th>
            </tr>
          </table>
        </div>
      </body>
</html>

生成的json数据：

[
  {
    "id": "1",
    "value1": "144",
    "value2": "00:01:125",
    "Driver": ""
  },
  {
    "id": "2",
    "value1": "144",
    "value2": "00:01:125",
    "Driver": ""
  },
  {
    "id": "9",
    "value1": "11",
    "value2": "00:01:125",
    "Driver": ""
  },
  {
    "id": "10",
    "value1": "12",
    "value2": "00:00:827",
    "Driver": ""
  }
]

有谁知道为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： html jquery mysql json ajax

【解决方案1】：

您将在每次调用结束时使用$('#myTable').append(row) 附加新行，而不删除旧行。

您可以在每次调用开始时将其设置为空；

...
$.each( data, function(i,item ) {
    $('#myTable').html('')   //here
    var row=$('<tr>');
    ...

【讨论】：

【解决方案2】：

 ...

  $('#myTable').html('')   //here
  $.each( data, function(i,item ) {
      var row=$('<tr>');
    ...

这工作正常非常感谢。

【讨论】：