我如何按 ID 显示 mysql 数据库中的数据

Question

id	product_title	product_desc
1000	Iphone 12	this is iPhone 12
1001	Iphone 11	this is iPhone 11
1002	Iphone X	this is iPhone X
1003	Iphone 8	this is iPhone 8
1004	Iphone 7	this is iPhone 7

我有一个名为 products 的 table，看起来有点像上面的 table。我在我的页面上展示了所有产品。但是现在我想使用 bootstrap 模式在我点击那个特定产品的名称时显示产品描述。（ Exp: 我点击 [= 的产品名称30=] 12 在我的页面上。将显示一个 boostrap 模态，向我显示 iPhone 12. )

的描述

我的问题是如何显示我点击的特定产品的描述？现在我在我的模式中输出了所有产品描述。

这是我用来展示产品的代码

<div class="row form-group" id="myDIV">
    <?php
    $sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
    $query = $conn->query($sql);

    if (!mysqli_num_rows($query)) {
      echo '
        <div class="col-12">
          <div class="badge badge-danger">No Products Found</div>
        </div>
      ';
    } else {

      while ($row = $query->fetch_assoc()) {

    ?>
      <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
        <div class="product-wrapper">
          <div class="card-body">
             <h5 class="product-title" style="min-height: 39px;">
              <span class="float-left" data-toggle="modal" data-target="#productdesc1">
              <?php echo $row['product_title']; ?>
              </span>
              </h5>
            <a href="product.php?cid=<?php echo $row['id']; ?>" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
          </div>
        </div>
      </div>
    <?php 
        }
      } 
    ?>
  </div>

这些是我用于 bootstrap 模态的代码

    <!-- The Modal -->
<div class="modal fade" id="productdesc1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <!-- Modal body -->
      <div class="modal-body">
       <div class="float-right mb-3">
          <button type="button" class="close" data-dismiss="modal" style="color:#ed1c25;">&times;</button>
        </div>
        <?php
    $sql = "SELECT product_desc FROM products";
    $query = $conn->query($sql);

    if (!mysqli_num_rows($query)) {
      echo '
        <div class="col-12">
          <div class="badge badge-danger">No Products Found</div>
        </div>
      ';
    } else {

      while ($row = $query->fetch_assoc()) {

    ?>
    <div class="mb-3">
       <h5 class="product-title">Description</h5>
        <p><?php echo $row['product_desc']; ?></p>
    </div>
    <?php 
      }
          } 
        ?>
</div>
    </div>
  </div>
</div>

Answer 1

您可以通过两种方式做到这一点：

在项目列表中设置模式，在foreach块内，但在模式内设置项目描述，但不要忘记更改有关切换按钮 ID 的模态 ID。
当用户点击项目名称时调用onclick事件，与此事件相关的动作调用ajax请求获取从数据库中按 ID 获取元素，当请求成功时，将检索到的数据设置在模态中并使其可见。

Answer 2

我会告诉你用jquery

做简单的

首先我在你的 <a> 添加 onlick ShowModalProduct() 并且看起来像这样

<a href="#" onclick="ShowModalProduct(<?=$row['id'];?>)" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>

<?=$row['id'];?> 它来自 foreach 数据，将作为在 javascript 代码

处显示 product_desc 的参数

然后在模式中我会在每个 <div>

处给出 id

<div class="mb-3 hidden" id="products_<?=$row['id'];?>">
   <h5 class="product-title">Description</h5>
      <p><?php echo $row['product_desc']; ?></p>
</div>

我使用这个 jquery 库
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

并添加脚本函数 ShowModalProduct() 将如下所示，当函数被触发时，它将删除隐藏的 class 并添加 class show-desc

function ShowModalProduct(id){
    $('#products_'+id).removeClass('hidden');
    $('#products_'+id).addClass('show-desc');
    $('#productdesc1').modal('toggle');
}

我忘了提到我在 show/hide 的 div 部分添加了 2 class 样式，当 foreach 产品描述时，我首先添加 class 隐藏的 class 像这样 <div class="mb-3 hidden" id="products_<?=$row['id'];?>"> 并在 sql (SELECT id,product_desc FROM products)

处包含 id

<style type="text/css">
    .hidden{
        display: none;
    }
    .show-desc{
        display: block;
    }
</style>

然后我像这样在按钮关闭模式中添加 onclick CloseModal()

<button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">&times;</button>

然后像这样添加函数脚本

function CloseModal(){
   $(".show-desc").each(function(){
       var id = $(this).attr('id');
       $("#"+id).removeClass('show-desc');
       $("#"+id).addClass('hidden');
    });
     $('#productdesc1').modal('hide');
 }

所以当模态关闭时，它会将所有 class show-desc 更改为 class hidden 所以当你显示另一个模态时，之前的 div不再出现

完整代码如下所示

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>
    <style type="text/css">
        .hidden{
            display: none;
        }
        .show-desc{
            display: block;
        }
    </style>
    <body>
        <div class="row form-group" id="myDIV">
            <?php
            $sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
            $query = $conn->query($sql);

            if (!mysqli_num_rows($query)) {
              echo '
                <div class="col-12">
                  <div class="badge badge-danger">No Products Found</div>
                </div>
              ';
            } else {

              while ($row = $query->fetch_assoc()) {

            ?>
              <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
                <div class="product-wrapper">
                  <div class="card-body">
                     <h5 class="product-title" style="min-height: 39px;">
                      <span class="float-left" data-toggle="modal" data-target="#productdesc1">
                      <?php echo $row['product_title']; ?>
                      </span>
                      </h5>
                    <a href="#" onclick="ShowModalProduct(<?=$row['id'];?>)" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
                  </div>
                </div>
              </div>
            <?php 
                }
              } 
            ?>
        </div>  

        <!-- The Modal -->
        <div class="modal fade" id="productdesc1" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <!-- Modal body -->
                    <div class="modal-body">
                    <div class="float-right mb-3">
                            <button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">&times;</button>
                    </div>
                        <?php
                            $sql = "SELECT id,product_desc FROM products";
                            $query = $conn->query($sql);

                            if (!mysqli_num_rows($query)) {
                              echo '
                                <div class="col-12">
                                  <div class="badge badge-danger">No Products Found</div>
                                </div>
                              ';
                            } else {

                              while ($row = $query->fetch_assoc()) {

                            ?>
                            <div class="mb-3 hidden" id="products_<?=$row['id'];?>">
                               <h5 class="product-title">Description</h5>
                                <p><?php echo $row['product_desc']; ?></p>
                            </div>
                            <?php 
                              }
                          } 
                        ?>
                    </div>
                </div>
              </div>
            </div>  

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

            <script type="text/javascript">
                function ShowModalProduct(id){
                    $('#products_'+id).removeClass('hidden');
                    $('#products_'+id).addClass('show-desc');
                    $('#productdesc1').modal('toggle');
                }

                function CloseModal(){
                    $(".show-desc").each(function(){
                        var id = $(this).attr('id');
                        $("#"+id).removeClass('show-desc');
                        $("#"+id).addClass('hidden');
                    });
                    $('#productdesc1').modal('hide');
                }
            </script>
                
    </body>
</html>

如果使用 ajax，像这样更改脚本中的函数

function ShowModalProduct(id){
    $.ajax({
        url: 'GetProduct.php',
        type: 'get',
        data: {'id':id}, 
        dataType: 'JSON',
        success: function(response){
            if(response==null){
                alert('Data Not Found');
            }else{
                data =  response;
                $('#desc-product').html(data.product_desc);
                $('#productdesc1').modal('toggle');
            }
        }
    });
}

function CloseModal(){
    $('#productdesc1').modal('hide');
}

并创建新的 php 文件 GetProduct.php 以获取详细产品

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

     $conn = mysqli_connect("localhost", "root", "","test"); //your config connection
     $sql = "SELECT * FROM products WHERE product_status = 1 and id='".$id_product."' ";
     $result = $conn->query($sql);
     $row =  $result->fetch_assoc();

    echo json_encode($row);
?>

主文件中的完整代码会像这样

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    </head>
    <!--    
    <style type="text/css">
        .hidden{
            display: none;
        }
        .show-desc{
            display: block;
        }
    </style> 
    -->
    <body>
        <div class="row form-group" id="myDIV">
            <?php
            $conn = mysqli_connect("localhost", "root", "","test"); //your config connection
            $sql = "SELECT * FROM products WHERE product_status = 1 ORDER BY product_created DESC LIMIT 6";
            $query = $conn->query($sql);

            if (!mysqli_num_rows($query)) {
              echo '
                <div class="col-12">
                  <div class="badge badge-danger">No Products Found</div>
                </div>
              ';
            } else {

              while ($row = $query->fetch_assoc()) {

            ?>
              <div class="col-lg-3 col-md-4 col-6 form-group" style="padding: 0 8px 0 8px;">
                <div class="product-wrapper">
                  <div class="card-body">
                     <h5 class="product-title" style="min-height: 39px;">
                      <span class="float-left" data-toggle="modal" data-target="#productdesc1">
                      <?php echo $row['product_title']; ?>
                      </span>
                      </h5>
                    <a href="#" onclick="ShowModalProduct(<?=$row['id'];?>)" class="btn btn-block addtocart text-center" style="text-decoration: none">View More</a>
                  </div>
                </div>
              </div>
            <?php 
                }
              } 
            ?>
        </div>  

        <!-- The Modal -->
        <div class="modal fade" id="productdesc1" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <!-- Modal body -->
                    <div class="modal-body">
                    <div class="float-right mb-3">
                            <button type="button" class="close" data-dismiss="modal" onclick="CloseModal();" style="color:#ed1c25;">&times;</button>
                    </div>
                            <div class="mb-3">
                               <h5 class="product-title">Description</h5>
                                <p id="desc-product"></p>
                            </div>
                    </div>
                </div>
              </div>
            </div>  

            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
            
            <script type="text/javascript">
                function ShowModalProduct(id){
                     $.ajax({
                        url: 'GetProduct.php',
                        type: 'get',
                        data: {'id':id}, 
                        dataType: 'JSON',
                        success: function(response){
                            if(response==null){
                                alert('Data Not Found');
                            }else{
                                data =  response;
                                $('#desc-product').html(data.product_desc);
                                $('#productdesc1').modal('toggle');
                            }
                        }
                    });
                }

                function CloseModal(){
                    $('#productdesc1').modal('hide');
                }
            </script>
                
    </body>
</html>

我如何按 ID 显示 mysql 数据库中的数据

How do i display data by ID from mysql database

php

bootstrap-modal