Question

我对HTML，PHP尤其是AJAX和JQuery刚起步。

我创建了一个HTML电子商务食品页面，该页面在网格中显示图像，并且每个图像都有悬停效果。悬停时，您会看到与图片匹配的标题以及显示“查看”的按钮（荷兰语）。图片和图片标题是从数据库中抓取的，我可以通过管理页面将数据插入其中。

现在，我想以Bootstrap模式显示来自同一数据库的一些数据，并提供一些额外的信息。单击视图按钮时，它将打开模式。该页面无法重新加载（由于模式），因此我为此使用了Jquery AJAX。

现在的问题是，当我单击按钮时，模态打开了，但是模态中什么都看不到。它只是空的，我不知道问题在哪里。

p.s。 <?php getPro(); ?>语句引用的是从数据库中抓取数据的函数。

HTML图像网格：

div class="container vertical-center-menu">
    <div class="row about-container">
      <div class="container mt-40">
        <div class="row mt-30">
                <?php getPro(); ?>
                <input type="button" name="view" value="Bekijken" id="<?php echo $row["product_id"];?>" class="btn btn-info btn-md view_data"/>
                </div>
              </div>
            </div>

HTML模式：

<div class="modal fade" id="dataModal">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">

      <!-- Modal body -->
      <div class="modal-body" id="product_detail">


      </div>
    </div>
  </div>
</div>

jQuery和AJAX脚本：

<script>
$(document).ready(function(){
  $('.view_data').click(function(){
    var product_id = $(this).attr("id");

    $.ajax({
        url:"select.php",
        method:"post",
        data:{product_id:product_id},
        success:function(data){
          $('#product_detail').html(data);
          $('#dataModal').modal("show");
        }
    });


  });
});
</script>

PHP（Select.php页面）

<?php
if(isset($_POST["product_id"]))
{
  $output = '';
  $connect = mysqli_connect("localhost","root","","ecommerce");
  $query = "SELECT * FROM products WHERE product_id = '".$_POST["product_id"]."'";
  $result = mysqli_query($connect, $query);


  while($row_pro = mysqli_fetch_array($result)){
    $pro_id = $row_pro['product_id'];
    $pro_title = $row_pro['product_title'];
    $pro_price = $row_pro['product_price'];
    $pro_desc = $row_pro['product_desc'];
    $pro_image = $row_pro['product_image'];


  echo '
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <div class="row h-100">
          <div class="col-md-5 col-sm-6 my-auto" style="overflow:hidden;">
            <img src="admin_area/product_images/$pro_image" alt="" style="height: 200px; ">
          </div>
          <div class="col-md-7 col-sm-6">
            <h3><strong>$pro_title</strong></h3>
            <h4>&euro; $pro_price</h4>
            <hr>
            <p> $pro_desc </p>
            <form>
              <div class="form-group">
                <label for="sel1">Aantal:</label>
                <select class="form-control" id="sel1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                </select>
                <br>
                <button type="button" class="btn btn-primary">Voeg toe</button>


  ';
}
}

 ?>

我希望输出是来自变量的数据，但是它显示了一个空白模态。

我看不到模态下的数据库数据。什么地方出了错？

0 个答案: