Php 如何在modal上从数据库中获取数据以显示特定单击的详细信息

我创建产品展示页面。每行4个产品展示。我有7个产品上传到数据库中。所以，如果我点击特定的产品，打开模式并显示我点击的产品的详细信息。我不明白如何获取特定产品的模态数据。下面是我的代码。请帮帮我

在这里，我获取数据到产品展示

<div class="row">
        <div class="position-relative">
            <?php
                $sql = "SELECT * FROM wm_products";
                $result = $conn->query($sql);
                if($result->num_rows > 0){
                    while($row = $result->fetch_assoc()){
                        ?>
                            <!-- start team item -->
                            <div class="col-md-3 padding-15px-lr team-block text-left team-style-1 md-margin-40px-bottom wow fadeInUp">
                                <div class="agileinfo_new_products_grid">
                                    <div class="agile_ecommerce_tab_left agileinfo_new_products_grid1">
                                        <div class="hs-wrapper hs-wrapper1">
                                            <img src="products_images/<?php echo $row['pro_img']; ?>" alt=" " class="img-responsive" />
                                        </div>
                                        <p style="height:40px;"><a href="single.html"><?php echo $row['pro_name']; ?></a></p>
                                        <div class="simpleCart_shelfItem">
                                            <p><i class="item_price"><?php echo $row['pro_price'];?></i></p>
                                            <p><a href="" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" dataid="<?php echo $row['pro_id']; ?>">View</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end team item -->  
                        <?php
                    }
                }
            ?>
        </div>
    </div> 

“alt=”“class=“img响应”/>
高度：40px；“>

这里是我的模式，以显示产品的细节

<div id="PRODUCT_DETAILS" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">                   
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><?php echo $row['pro_name'];?></h4>
                </div>
                <div class="modal-body product_detail">
                    <div class="col-md-5 modal_body_left">
                        <img src="../products_images/<?php echo $row['pro_img']; ?>" alt=" " class="width-azset img-responsive">
                    </div>
                    <div class="col-md-7 modal_body_right">
                        <h4><?php echo $row['pro_name'];?></h4>
                        <p><?php echo $row['pro_dis'];?></p>

                        <div class="modal_body_right_cart simpleCart_shelfItem">
                            <p><i class="item_price"><?php echo $row['pro_price'];?></i></p>                            
                        </div>                  
                    </div>                  
                    <div class="clearfix"> </div>                   
                </div>
                <div class="modal-footer">
                    <button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
</div>

&时代；
“alt=”“class=“宽度azset img响应”>


添加到购物车
取消

在产品显示中，尝试将下面一行中的数据id更改为href

---

您可以使用php jQuery/ajax和JavaScript执行此操作：

因此，如果将锚定标记更改为以下内容：

<p><a href="#PRODUCT_DETAILS" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" data-id="<?php echo $row['pro_id']; ?>">Add to cart</a></p>

  $('#PRODUCT_DETAILS').on('show.bs.modal', function (e) {
        var productID= $(e.relatedTarget).data('id');
        $.ajax({
            url:"fetchProductDetails.php",
            method: "POST",
            data:{productID:productID},
            dataType:"JSON",
            success:function(data)
            {   
                $('#proPrice').text(data.price);
                $('#proName').text(data.name);
                $('#proNameTitle').text(data.name);
                $('#proDesc').text(data.description);
                $('#proImage').html(data.img); 
            }
        })
     });

<div id="PRODUCT_DETAILS" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">                   
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 id="proNameTitle"></h4>
                </div>
                <div class="modal-body product_detail">
                    <div class="col-md-5 modal_body_left">
                        <span id="proImage"></span>
                    </div>
                    <div class="col-md-7 modal_body_right">
                        <h4 id="proName"></h4>
                        <p id="proDesc"></p>

                        <div class="modal_body_right_cart simpleCart_shelfItem">
                            <p id="proPrice"></i></p>                            
                        </div>                  
                    </div>                  
                    <div class="clearfix"> </div>                   
                </div>
                <div class="modal-footer">
                    <button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
</div>

创建一个php文件，其中包含所有产品详细信息，如下所示：

require 'database.php';

if (isset($_POST['productID'])) {

$productID = $_POST['productID'];

$query = $conn->prepare('SELECT * FROM products WHERE id=:productID');
$query->execute(array(':productID' => $productID));

if ($query->rowCount() > 0) {

while ($row = $query->fetch(PDO::FETCH_ASSOC)) {

        $data['description'] = $row['pro_dis'];
        $data['name'] = $row['pro_name'];
        $data['price'] = $row['pro_price'];

        $img = $row['pro_img'];

        $data['img'] = "<img src='../products_images/".$img."' alt='' class='width-azset img-responsive'>";

}
    echo json_encode($data);

}else{
    echo "<h1>" . "Error 404 Page" . "</h1>";
}
}

需要“database.php”；
如果（isset（$_POST['productID']））{
$productID=$_POST['productID']；
$query=$conn->prepare（'SELECT*FROM products，其中id=:productID'）；
$query->execute（数组（':productID'=>$productID））；
如果（$query->rowCount（）>0）{
while（$row=$query->fetch（PDO:：fetch_ASSOC））{
$data['description']=$row['pro_dis']；
$data['name']=$row['pro_name']；
$data['price']=$row['pro_price']；
$img=$row['pro_img']；
$data['img']=“”；
}
echo json_编码（$data）；
}否则{
回显“.”错误404页“.”；
}
}

然后，在模式中，您可以通过执行以下操作来显示这一点：

<p><a href="#PRODUCT_DETAILS" class="item_add prod_detail" data-toggle="modal" data-target="#PRODUCT_DETAILS" data-id="<?php echo $row['pro_id']; ?>">Add to cart</a></p>

  $('#PRODUCT_DETAILS').on('show.bs.modal', function (e) {
        var productID= $(e.relatedTarget).data('id');
        $.ajax({
            url:"fetchProductDetails.php",
            method: "POST",
            data:{productID:productID},
            dataType:"JSON",
            success:function(data)
            {   
                $('#proPrice').text(data.price);
                $('#proName').text(data.name);
                $('#proNameTitle').text(data.name);
                $('#proDesc').text(data.description);
                $('#proImage').html(data.img); 
            }
        })
     });

<div id="PRODUCT_DETAILS" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">                   
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 id="proNameTitle"></h4>
                </div>
                <div class="modal-body product_detail">
                    <div class="col-md-5 modal_body_left">
                        <span id="proImage"></span>
                    </div>
                    <div class="col-md-7 modal_body_right">
                        <h4 id="proName"></h4>
                        <p id="proDesc"></p>

                        <div class="modal_body_right_cart simpleCart_shelfItem">
                            <p id="proPrice"></i></p>                            
                        </div>                  
                    </div>                  
                    <div class="clearfix"> </div>                   
                </div>
                <div class="modal-footer">
                    <button type="submit" name="Add_Cart" class="btn btn-success">Add to Cart</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
</div>

&时代；


添加到购物车
取消

---

稍微修改以满足您的需求。

onclick

锚定标记在jquery中获取

dataid

，使用

dataid

执行一些ajax调用，并在modal body中加载响应内容。