单击“产品瓷砖”从数据库中获取产品数据

Question

因此，我使用“when”在主页上显示产品，我希望当用户单击产品块时，它被重定向到一个文件product_page.php，该文件包含关于该特定产品的所有细节，我不知道是否因为我使用的是'a‘标记，但它不起作用。

<?php
include 'config.php';
$stmt = $conn->prepare("SELECT * FROM product");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc()):
?> 
<div class="col-sm-6 col-md-4 col-lg-3 mb-2" > 
<a href="product_page.php">
<div class="card-deck" id="product"> 
<div class="card border border-light ">
<img class="card-img-top" src="<?= $row['product_image'] ?>" >
<div class="card-body border border-light" style="background-color: #ffffff">
  <h4 class="card-title text-center text-info"><?= $row['product_name'] ?></h4>
  <h5 class="card-text text-center text-danger">Rs. <?= number_format($row['product_price'],2) ?> 
</h5> 
</div>
<div class="card-footer border border-light" style="background-color: #ffffff">
<form action="" class="form-submit">
  <input type="hidden" class="pid" value="<?= $row['id']?>">
  <input type="hidden" class="pname" value="<?= $row['product_name']?>">
  <input type="hidden" class="pprice" value="<?= $row['product_price']?>">
  <input type="hidden" class="pimage" value="<?= $row['product_image']?>">
  <input type="hidden" class="pcode" value="<?= $row['product_code']?>">
  <button class="btn btn-block addItemBtn" style="background-color: #FE701E; color:#ffffff">Add To 
   Cart</button>
  </form>
</div>
</div>
</div>
</a>
</div>

<?php endwhile; ?>

这是我的action.php代码

if(isset($_POST['pid']))
{
$pid = $_POST['pid'];
$pname = $_POST['pname'];
$pprice = $_POST['pprice'];
$pimage = $_POST['pimage'];
$stmt = $conn->prepare("SELECT * FROM product WHERE pid=? LIMIT 1");
$stmt->bind_param("i",$pid);
$stmt->execute();
$pcount=mysqli_num_rows($stmt);
$res = $stmt->get_result();
$r = $res->fetch_assoc();
if($pcode>0)
{
$_SESSION['product_name'] =$r['product_name'];
$_SESSION['product_price'] =$r['product_price'];
$_SESSION['product_image'] =$r['product_image'];
header("Location:product_page.php");
}

以下是ajax请求

$(document).ready(function(){
  $("#product").click(function(e){
    e.preventDefault();
    var $form =$(this).closest(".form-submit");
    var pid = $form.find(".pid").val();
    var pname = $form.find(".pname").val();
    var pprice = $form.find(".pprice").val();
    var pimage = $form.find(".pimage").val();
    var pcode = $form.find(".pcode").val();

    $.ajax({
      url:'action.php',
      method:'post',
      data:{pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
      success:function(response){
                 }
    });
  });});

Answer 1

你的方法很混乱。为什么您只有一个到products.php的链接？您可以尝试下列方法之一

选项1这是一个更好的选项，如果您不想在中看到除ID之外的任何数据。仅通过指向products.php的链接传递ID。在那里，您获取所需的其余数据。

<a href="products.php?id=<?php echo $row['id'];?>Link text here, which could be the ID</a>

将其放在循环中，在products.php中，只需根据链接中的ID查询数据库，就可以获取页面中所需的数据。

选项2 --这可能更容易一些，因为您已经拥有了所有的数据，除非您不希望将其中的一些数据显示为url的一部分)--将url中的所有这些变量作为GET参数传递

echo '<a href="products.php?id=' . $row['id'] . '&pname= . $row['product_name'] . '>Link text here</a>"

只需使用&运算符继续添加所有参数即可。

Answer 2

您正在#product上调用ajax请求。由于您是在循环中显示产品，所以#product并不是唯一的。html的任何元素的ID在同一页中都应该是唯一的。我建议您将id给<form>而不是<div>，这样您就可以创建一个独特的id，比如-

<form action="" class="form-submit" id="product_<?php echo $row['id']; ?>"> 

然后可以调用ajax请求。-

$(document).on('submit', '[id^="product_"]', function(){
  e.preventDefault();
    var $form =$(this).closest(".form-submit");
    var pid = $form.find(".pid").val();
    var pname = $form.find(".pname").val();
    var pprice = $form.find(".pprice").val();
    var pimage = $form.find(".pimage").val();
    var pcode = $form.find(".pcode").val();

    $.ajax({
      url:'action.php',
      method:'post',
      data:{pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
      success:function(response){
                 }
    });
});