有没有一种方法可以生成唯一的ID并将数据从php传递到javascript以进行计算？

Question

1. 从MySQL数据库项目列表中获取数据。
2. 显示找到的所有数据
3. 用户可以在第28行选择数量
4. 当数字更改时，javascript可以获取输入值和商品价格
5. 它会更新总价并计算总价，然后在第45行的同一页面上自动显示。

我知道元素ID在整个文档中应该是唯一的，但是当显示数据时，它们在while循环中使用相同的ID，如第39行id =“ itemNumber”

然后，我应该进行哪些更改，以便javascript可以正确计算值？像在第39行显示数据的同时生成唯一的ID？使用某种方式将价格数据传递给javascript

我是php和javascript的新手，对jQuery我一无所知。

<?php
$sql = "SELECT * FROM itemList";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div class='product'>";
echo "<div class='row justify-content-center align-items-center'>";
echo "<div class='col-md-5 product-info'>";
//Display product Name
echo "<a href='#' class='product-name'>";
echo $row["itemname"];
echo "</a>";
echo "<div class='product-specs'>";
//Display product Desec
echo "<div><span>Item Desec : </span><span class='value'>";
echo $row["itemdesc"];
echo "</span></div>";
//Display item Remain
echo "<div><span>Item Remain : </span><span class='value'>";
echo $row["itemRemain"];
echo "</span></div>";
echo "</div>";
echo "</div>";
echo "<div class='col-6 col-md-2 quantity'><label class='d-none d-md-block' for='quantity'>Quantity</label>";
//Item number controll
echo "<input type='number' value='0' id='itemNumber' class='form-control quantity-input' onchange='updateChoice()'>";
echo "</div>";
echo "<div class='col-6 col-md-2 price'>";
echo "<h6>Price</h6>";
echo "<span id='itemprice'>";
echo $row["price"];
echo "</span></div>";
echo "</div>";
echo "</div>";
}
} else {
echo "DATABASE ERROR : NO PRODUCT FOUND";
}
$conn->close();
?>

<!--Display the total price-->
<h4><span class="text">Total</span><span class="price" id="totalPrice">$0</span></h4>
<script type="text/javascript">
function updateChoice(){
var itemNumber = document.getElementById("itemNumber").value;
var itemPrice = document.getElementById("itemprice").value;
document.getElementById("totalPrice").innerHTML = itemNumber * itemPrice;
}
</script>

它只能从第一个中获取项目的数量，而无法获得用于计算的项目的价格

Answer 1

由于您刚开始，建议您阅读本教程。您的代码有很多需要改进的地方，但这不是这里的问题。

https://code.tutsplus.com/tutorials/how-to-use-ajax-in-php-and-jquery--cms-32494

您所缺少的是，PHP将HTML内容提供给客户端，然后PHP现在就完成了它的工作。 HTML，CSS和JavaScript / JQuery接管客户端。

当您点击需要在PHP中处理的表单上的按钮时（如保存到数据库中，从数据库中检索到的或您的业务逻辑所在的位置），您需要对AJAX进行回调服务器。可以设置该AJAX调用来处理从服务器返回的结果。另外，服务器可以从数据库获取唯一ID。

此AJAX可以使用JQuery或原始JavaScript来完成，并且都在本教程中介绍。在这里，无论结果如何，都可以使用结果更新表单。根据您需要发回的数据量，您可能需要一个JSON或XML对象来打包内容，并且在服务器端和客户端使用这些对象也是您需要学习的主题。除了使用AJAX调用进行这一编程之外，还可以做更多的事情。

您可能需要学习更多甚至更多的知识，但这超出了问题的范围，因此您必须继续自己进行研究。祝你好运！