php - ajax 和数据模态未加载的数据

Question

我正在尝试使用 ajax 和数据模式对话框加载车辆详细信息。但似乎数据没有正确加载，我似乎无法弄清楚代码有什么问题。

<div class="container" style="width:900px;">  
    <h3 align="center">View All Available Vehicle</h3>  
    <br />  
    <div class="table-responsive">  
         <table class="table table-striped">  
              <tr>  
                   <th width="40%">Plate Number</th>
                   <th width="20%">Type</th>
                   <th width="20%">Status</th>  
                   <th width="10%">View</th>  
              </tr>  
              <?php  
              while($row = mysqli_fetch_array($result))  
              {  
              ?>  
              <tr>  
                   <td><?php echo $row["plateNo_vehicle"]; ?></td> 
                   <td><?php echo $row["vehicle_Type"];?></td> 
                   <td><?php echo $row["vehicle_status"];?></td>
                   <td><input type="button" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data" /></td>  
              </tr>  
              <?php  
              }  
              ?>  
         </table>  
    </div>  
</div>

用于显示详细信息的数据模态对话框。

<div id="dataModal" class="modal fade">  
  <div class="modal-dialog">  
       <div class="modal-content">  
            <div class="modal-header">  
                 <button type="button" class="close" data-dismiss="modal">&times;</button>  
                 <h4 class="modal-title">Vehicles Details</h4>  
            </div>  
            <div class="modal-body" id="vehicle_detail">  
            </div>  
            <div class="modal-footer">  
                 <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>  
            </div>  
       </div>  
  </div>  

这是我用的select.php

<?php 

   if(isset($_POST["vehicle_id"])) {  
      $output = '';  
      $link=msqli_connect("localhost","root","root","vms");
      $query = "SELECT * FROM vehicle WHERE id_vehicle = '".$_POST["vehicle_id"]."'";  
      $result = mysqli_query($link, $query);  
      $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';  
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td width="30%"><label>Plate No</label></td>  
                     <td width="70%">'.$row["plateNo_vehicle"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Engine Number</label></td>  
                     <td width="70%">'.$row["engineNo_vehicle"].'</td>  
                </tr>  
                <tr>  
                     <td width="30%"><label>Engine Capacity</label></td>  
                     <td width="70%">'.$row["engineCapacity_vehicle"].'</td>  
                </tr>  
                ';  
      }  
      $output .= "</table></div>";  
      echo $output;  
   }  

 ?>

使用的脚本

<script>  

$(document).ready(function(){  
   $('.view_data').click(function(){  
       var vehicle_id = $(this).attr("id_vehicle");  
       $.ajax({  
            url:"select.php",  
            method:"post",  
            data:{vehicle_id:vehicle_id},  
            success:function(data){  
                 $('#vehicle_detail').html(data);  
                 $('#dataModal').modal("show");  
            }  
       });   
   });   
});   

</script>

Answer 1

查看您的 select.php 文件:

<?php 

if(isset($_POST["vehicle_id"])) {  
$output = '';  
$link=msqli_connect("localhost","root","root","vms"); <========

打字错误。应该是:

$link=mysqli_connect("localhost","root","root","vms");

还有，

将 data-vehicleid 属性添加到您的 view_data 按钮:

<td><input type="button" data-vehicleid="<?php echo $row["id_vehicle"]; ?>" name="view" value="more" id="<?php echo $row["id_vehicle"]; ?>" class="btn btn-info btn-xs view_data " /></td> 

然后更改您的脚本以接收该属性值:

<script>  

$(document).ready(function(){  
   $('.view_data').click(function(){  
       var vehicle_id = $(this).attr("data-vehicleid");  <=====
       $.ajax({  
           ....
       }); 
   });  
});  


</script>

现在，您已将其设置为:

var vehicle_id = $(this).attr("id_vehicle");

这将不起作用，因为您在该按钮上没有名为 id_vehicle="..." 的属性。我猜你的意思是 attr("id");