我正在尝试使用 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">×</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>
最佳答案
查看您的 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");
关于php - ajax 和数据模态未加载的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43223350/