Bootstrap模态框无法正确传递行数据，始终显示值1问题排查

我开发了一个页面展示记录的部分字段，每条记录旁有View按钮，点击打开Bootstrap模态框显示完整详情，但模态框始终显示'1'，无法输出正确的id和fy变量值，代码如下：

<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{   
header('location:index.php');
}
else{ 

?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- BOOTSTRAP CORE STYLE  -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />

</head>
<body>

<!-- MENU SECTION END-->
<div class="content-wrapper">
<div class="container">
<div class="row pad-botm">
<div class="col-md-12">
<h4 class="header-line">Manage Letter</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Outwards Letter
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr style="text-align:center">
<th style="width:25px;">Sl.No.</th>
<th style="text-align:center">FY</th>
<th style="text-align:center">Addressee </th>
</tr>
</thead>
<tbody>
<?php 
$sid=$_SESSION['stdid'];
$sql="SELECT * from tbloutwards where Dep='$sid' ORDER BY id ";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{               ?>                                      
<tr class="odd gradeX">
<td class="center"><?php echo htmlentities($cnt);?></td>
<td class="center"><?php echo htmlentities($result->fy);?></td>
<td class="center"><?php echo htmlentities($result->Dep);?></td>
<td class="center"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">View</button></t>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php
$sid=$_post['id'];
$fy=$_post['fy'];
$sql="SELECT * from tbloutwards where fy='$fy' and id='$id'  " ;
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
echo print_r($results['fy']);

?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">CLOSE</button>

</td>
</tr>
<?php $cnt=$cnt+1;}}} ?>                                      
</tbody>
</table>
</div>
<script>
$(document).ready(function () {             
$('.open-my-modal').click(function(){
$('#id').html($(this).data('id'));
$('#fy').html($(this).data('fy'));
$('#dep').html($(this).data('dep'));

// show Modal
$('#myModal').modal('show');
});
});
</script> 
</div>
</div>
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS  -->
<script src="assets/js/bootstrap.js"></script>
<!-- DATATABLE SCRIPTS  -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPTS  -->
<script src="assets/js/custom.js"></script>
</body>
</html>

核心问题分析及修复 #

1. 重复的模态框ID导致冲突 #

循环里为每条记录生成了同一个ID为exampleModalCenter的模态框，HTML中ID必须唯一。点击按钮时只会触发第一个模态框，因此始终显示错误内容。

修复：

• 将模态框移出循环，只保留一个全局模态框
• 通过JavaScript动态填充模态框内容，而非循环生成多个模态框

2. PHP查询逻辑完全无效 #

模态框内的PHP代码在页面加载时执行，此时$_POST没有对应数据，查询条件为空。echo print_r($results['fy'])输出1是因为print_r执行成功时返回布尔值true，被echo转换为字符串1。

修复：

• 移除模态框内的PHP查询代码，改用JavaScript传递数据，或通过AJAX动态获取详情

3. JavaScript事件绑定不匹配 #

按钮没有添加open-my-modal类，也未设置data-id、data-fy等自定义属性，且JS中调用的模态框ID是#myModal，与实际的#exampleModalCenter不匹配，导致无法获取和传递数据。

修复：

• 给按钮添加对应类和自定义数据属性
• 修正模态框ID的引用，确保JS与HTML一致

4. 存在SQL注入风险 #

直接拼接变量到SQL语句中，存在严重安全漏洞。

修复：

• 使用PDO参数绑定执行查询，避免直接拼接变量

完整修正后的代码示例 #

<?php
session_start();
error_reporting(E_ALL); // 开启错误提示方便调试
include('includes/config.php');
if(strlen($_SESSION['login'])==0)
{   
    header('location:index.php');
    exit;
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- BOOTSTRAP CORE STYLE  -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />

</head>
<body>

<!-- MENU SECTION END-->
<div class="content-wrapper">
<div class="container">
<div class="row pad-botm">
<div class="col-md-12">
<h4 class="header-line">Manage Letter</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Outwards Letter
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr style="text-align:center">
<th style="width:25px;">Sl.No.</th>
<th style="text-align:center">FY</th>
<th style="text-align:center">Addressee </th>
<th style="text-align:center">Action</th>
</tr>
</thead>
<tbody>
<?php 
$sid = $_SESSION['stdid'];
// 使用参数绑定避免SQL注入
$sql = "SELECT * from tbloutwards where Dep=? ORDER BY id";
$query = $dbh->prepare($sql);
$query->execute([$sid]);
$results = $query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
    foreach($results as $result)
    {              
?>                                      
<tr class="odd gradeX">
<td class="center"><?php echo htmlentities($cnt);?></td>
<td class="center"><?php echo htmlentities($result->fy);?></td>
<td class="center"><?php echo htmlentities($result->Dep);?></td>
<td class="center">
<!-- 添加类和数据属性 -->
<button type="button" class="btn btn-primary open-my-modal" 
        data-id="<?php echo htmlentities($result->id);?>" 
        data-fy="<?php echo htmlentities($result->fy);?>"
        data-dep="<?php echo htmlentities($result->Dep);?>">
    View
</button>
</td>
</tr>
<?php $cnt=$cnt+1;}
} ?>                                      
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- 全局唯一的模态框，移出循环 -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Letter Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- 用于显示动态内容的容器 -->
<p><strong>ID:</strong> <span id="modal-id"></span></p>
<p><strong>FY:</strong> <span id="modal-fy"></span></p>
<p><strong>Addressee:</strong> <span id="modal-dep"></span></p>
<!-- 如果需要完整详情，可以在这里添加更多容器，或者通过AJAX加载 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">CLOSE</button>
</div>
</div>
</div>
</div>

<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS  -->
<script src="assets/js/bootstrap.js"></script>
<!-- DATATABLE SCRIPTS  -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPTS  -->
<script src="assets/js/custom.js"></script>

<script>
$(document).ready(function () {             
    $('.open-my-modal').click(function(){
        // 从按钮的data属性获取值
        let id = $(this).data('id');
        let fy = $(this).data('fy');
        let dep = $(this).data('dep');
        
        // 填充模态框内容
        $('#modal-id').text(id);
        $('#modal-fy').text(fy);
        $('#modal-dep').text(dep);

        // 显示模态框
        $('#exampleModalCenter').modal('show');
    });
});
</script> 
</body>
</html>

额外说明 #

如果需要显示完整记录详情，建议用AJAX异步请求：

1. 创建get_letter_details.php接口文件，接收id参数并返回记录的JSON数据
2. 在按钮点击事件中调用该接口，获取数据后填充到模态框中

这种方式避免了冗余HTML，同时提升页面性能。

内容的提问来源于stack exchange，提问作者leraner