Php 单击时显示基于产品的页面

我有一个页面，其中显示了几个图像，例如，单击milo图像，它会转到一个页面，其中显示了milo的所有图像，但当我单击其他页面时，例如，tea，它也显示了milo的图像。我需要根据单击的图像显示页面

        <?php  
    $query = "SELECT * FROM tbl_product ORDER BY id ASC"; //order by ID ascending order  
    $result = mysqli_query($connect, $query);  
    while($row = mysqli_fetch_array($result))  
    {  
    ?>
<div id="products" class="productsContainer">
    <div class="responsive">   <!-- OUTER BOX OF PRODUCT -->
        <div class="gallery"> <!-- INNER BOX FOR PRODUCT -->
                <a href="box.php"><img src="images/<?php echo $row["image"]; ?>" class="img-responsive" /></a><br /> <!-- IMAGE OF PRODUCTS -->
                <h4 class="text-info"><?php echo $row["name"]; ?></h4>  <!-- NAME OF PRODUCT -->
                <h4 class="text-danger">$ <?php echo $row["price"]; ?></h4>  <!-- PRODUCT PRICE -->
                <input type="text" name="quantity" id="quantity<?php echo $row["id"]; ?>" class="form-control" value="1" />  <!-- QUANTITY PRODUCT -->
                <input type="hidden" name="hidden_name" id="name<?php echo $row["id"]; ?>" value="<?php echo $row["name"]; ?>" />  <!-- NOT SHOWN -->
                <input type="hidden" name="hidden_price" id="price<?php echo $row["id"]; ?>" value="<?php echo $row["price"]; ?>" />  <!-- NOT SHOWN -->
                <input type="button" name="add_to_cart" id="<?php echo $row["id"]; ?>" style="margin-top:5px;" class="btn btn-warning form-control add_to_cart" value="Add to Cart" />  <!-- ADD TO CART BUTTON -->

        </div>  
    </div> 
</div>
    <?php  
        }  
    ?>

$   
将产品Id传入box.php（我相信box.php包含图像细节或产品细节的代码）

例如：


在php中，使用get获取id变量

box.php

<?php 
  $id = $_GET['id'];

?>

我不知道您知道多少Ajax/Javascript，但在本例中，您可以使用这些代码为您的脚本显示基于其id的图像，因为用户单击image
其中id=？
通过Ajax返回返回值：

<script>
    function getProduct(val) {
        $.ajax({
        type: "POST",
        url: "box.php",
        data:'id='+val,
        success: function(data){
            $("#product-echo").html(data);
        }
        });
    }
</script>

<?php  
$query = "SELECT * FROM tbl_product ORDER BY id ASC"; //order by ID ascending order  
$result = mysqli_query($connect, $query);  
while($row = mysqli_fetch_array($result))  
{  
    ?>
    <div id="products" class="productsContainer">
        <div class="responsive">   <!-- OUTER BOX OF PRODUCT -->
            <div class="gallery"> <!-- INNER BOX FOR PRODUCT -->
                    <a href="javascript:void(0)" onclick="getProduct('<?php echo $row['id']; ?>')"><img src="images/<?php echo $row["image"]; ?>" class="img-responsive" /></a><br /> <!-- IMAGE OF PRODUCTS -->
                    <h4 class="text-info"><?php echo $row["name"]; ?></h4>  <!-- NAME OF PRODUCT -->
                    <h4 class="text-danger">$ <?php echo $row["price"]; ?></h4>  <!-- PRODUCT PRICE -->
                    <input type="text" name="quantity" id="quantity<?php echo $row["id"]; ?>" class="form-control" value="1" />  <!-- QUANTITY PRODUCT -->
                    <input type="hidden" name="hidden_name" id="name<?php echo $row["id"]; ?>" value="<?php echo $row["name"]; ?>" />  <!-- NOT SHOWN -->
                    <input type="hidden" name="hidden_price" id="price<?php echo $row["id"]; ?>" value="<?php echo $row["price"]; ?>" />  <!-- NOT SHOWN -->
                    <input type="button" name="add_to_cart" id="<?php echo $row["id"]; ?>" style="margin-top:5px;" class="btn btn-warning form-control add_to_cart" value="Add to Cart" />  <!-- ADD TO CART BUTTON -->

            </div>  
        </div> 
    </div>
<?php  
}  
?>


<div id="product-echo"></div>

现在，这很简单，我建议您在处理
box.php
端的调用时多花点时间，但是您应该对如何完成这项工作有一个很好的了解

如果您对使用Ajax调用感到不舒服，您可以随时将用户发送到
box.php
并启动产品元素。
非常有用的答案！我不太擅长ajax，我可以知道val的用途吗？非常感谢，我希望它能帮助您更好地理解它，
val
定义要选择的ID。
<?php
if (isset($_POST['id']))
{
    $id = $_POST['id'];
    $query = "SELECT * FROM tb1_product WHERE id = " . $id;

    $result = mysqli_query($connect, $query);  
    while($row = mysqli_fetch_array($result))  
    {
        // layout content as your heart so desires...
    }
}
?>