使用动态Modal展示搜索结果详情时无内容的技术求助

问题简述 #

点击列表中的详情按钮后，Modal弹窗无内容显示，需基于matno字段从数据库动态加载对应商品的详情信息。

错误点分析 #

1. 按钮数据属性不匹配：列表按钮用data-id存储matno，但JS中尝试获取data('matno')，属性名不一致导致无法拿到正确参数。
2. AJAX参数传递不规范：POST请求用字符串拼接参数，易出错且不符合规范；未添加错误回调，无法排查请求失败问题。
3. 详情页未筛选数据：detail.php直接查询所有商品数据，没有根据传入的matno筛选对应记录，且未接收前端传递的参数。

修复步骤 #

1. 修正列表按钮的data属性 #

将按钮的data-id改为data-matno，确保与JS中的取值对应：

<td class="align-middle text-center">
  <a href='#myModal' class='btn btn-default btn-small' data-matno='<?php echo $data['matno']; ?>' data-toggle='modal'><span class="glyphicon glyphicon-folder-open"></span></a>
</td>

2. 优化AJAX请求代码 #

改用对象形式传递参数，添加错误回调便于调试：

<script type="text/javascript">
$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (e) {
        var matno = $(e.relatedTarget).data('matno');
        $.ajax({
            type : 'POST',
            url : 'detail.php',
            data : { matno: matno }, // 用对象传递参数更规范
            success : function(data){
                $('.modal-body').html(data);
            },
            error: function(xhr, status, error) {
                // 调试用：打印错误信息
                console.log("AJAX请求失败: " + error);
                $('.modal-body').html("加载详情失败，请稍后重试");
            }
        });
     });
});
</script>

3. 修复detail.php的数据查询逻辑 #

接收前端传递的matno参数，通过预处理语句筛选对应记录，避免SQL注入：

<?php
include "connection.php";

// 接收POST传递的matno参数
if(isset($_POST['matno']) && !empty($_POST['matno'])){
    $matno = $_POST['matno'];
    // 带条件查询对应商品
    $sql = $pdo->prepare("SELECT * FROM ERSAsp WHERE matno = :matno");
    $sql->bindParam(':matno', $matno);
    $sql->execute();
    
    $data = $sql->fetch();
    if($data){
?>
    <table>
        <tr class="align-middle text-center">
            <img src="data/QR/<?php echo $data['QR']; ?>" width="200" height="200">
        </tr>
        <tr class="align-middle"><td>SAP Code:</td><td><?php echo $data['sapcode']; ?></td></tr>
        <tr class="align-middle"><td>Spare Part:</td><td><?php echo $data['sparepart']; ?></td></tr>
        <tr class="align-middle"><td>Unit:</td><td><?php echo $data['unit']; ?></td></tr>
        <tr class="align-middle"><td>Manufacturer:</td><td><?php echo $data['manufacturer']; ?></td></tr>
        <tr class="align-middle"><td>PN:</td><td><?php echo $data['pn']; ?></td></tr>
    </table>
<?php
    } else {
        echo "未找到对应商品的详情信息";
    }
} else {
    echo "参数错误，请重试";
}
?>

额外注意事项 #

• 确保connection.php中的数据库连接配置正确，能正常访问数据库。
• 检查data/QR/目录下是否存在对应商品的二维码图片，路径是否正确。
• 打开浏览器开发者工具（F12），查看Network标签页，确认AJAX请求是否成功，响应内容是否正确。

内容的提问来源于stack exchange，提问作者A Bayu Kurniawan