jquery ajax 在表重复的末尾添加 mysql 行
Posted
技术标签:
【中文标题】jquery ajax 在表重复的末尾添加 mysql 行【英文标题】：jquery ajax adds mysql rows at the end of the table-repeating 【发布时间】：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": ""
]
有谁知道为什么会发生这种情况，我该如何解决？
【问题讨论】：
【参考方案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>');
...
这工作正常 非常感谢。
【讨论】：
以上是关于jquery ajax 在表重复的末尾添加 mysql 行的主要内容，如果未能解决你的问题，请参考以下文章
使用ajax jQuery for-each函数在表中追加多个数据