每次执行mysql查询时如何添加一个新的html表行

Question

我想知道是否可以查询数据库，并且每次单击提交按钮时，它都会向表中添加一个新行，而不是刷新页面。

你看，发生的事情是当我运行查询时，它会成功添加行，但是当我再次运行查询时，它会刷新页面，基本上一次只能添加一行。

基本上，我希望能够创建一个表格，每次我使用条码扫描仪扫描条码时都会将产品添加到列表中。当用户扫描代码时，将执行查询从数据库中获取相关数据，并显示一行。

$barcode = $_POST["Barcode"];
$query = "Select * from products WHERE ProductBarcode = $barcode";
$result = $mysqli->query($query);
					
if ($result->num_rows > 0) {
	echo "<table>
	<tr>
   		<td><strong>ID</strong></td>
   		<td><strong>Name</strong></td>
   		</tr>";
   	// output data of each row
   	while($row = $result->fetch_assoc()) {
echo "<tr><td><input type='checkbox' value='".$row['Row_ID']."' />".$row['Row_ID']."</td>
<td>".$row['ProductName']." "."</td></tr>";
}
	echo "</table>";
} else {
    echo "0 results";
   	}
$mysqli->close();

Answer 1

您可以使用 jQuery/ajax 来实现这一点。看看这篇文章。我相信它正是您想要的： Creating a table with mysql, php and ajax (with jquery)

Answer 2

您可以使用 Ajax 做到这一点

我正在编写一个伪代码，它会告诉你如何做到这一点

第一步：创建表并定义表ID

<table id="myTable">
<tr>
    <td><strong>ID</strong></td>
    <td><strong>Name</strong></td>
    </tr>
</table>

第 2 步：使用 Ajax 提交您的条形码数据或产品 ID

<script>
$(document).on('click', "#submitButton", function () {
var barcode = $("#barcode").val();
    $.ajax({
                url: 'getProduct.php',
                dataType: 'json',
                type: 'POST',
                data: {'Barcode':barcode},
            success: function (data) {
                if (data.products.length > 0) {
                   $(data.products).each(function(index,element){
                        $("#myTable").append("<tr><td><input type='checkbox' value='"+ element.product_id+"' />"+ element.product_id+"</td>
    <td>"+ element.product_name+"</td></tr>");
                   });
                } else {
                  alert("No Products Found");
                }  
            },
            beforeSend: function () {
                showLoader();
            },
            complete: function () {
                hideLoader();
            },
        });
 });
</script>

第 3 步：您的 getProduct.php 代码将是这样的

$barcode = $_POST["Barcode"];
$query = "Select * from products WHERE ProductBarcode = $barcode";
$result = $mysqli->query($query);

if ($result->num_rows > 0) {
    $products = mysqli_fetch_all ($result, MYSQLI_ASSOC);
} else {
    $products = [];
}
echo json_encode($products);
$mysqli->close();