如何从传递到模态框的变量中获取对应MySQL数据？

咱们先拆解下你遇到的问题：你的模态框里的表格数据没法正确加载，核心原因有两个，还有几个小细节需要修正：

核心问题 #

1. 模态框内的PHP代码执行时机错误：页面首次加载时，模态框里的PHP就已经运行了，这时候$_POST['parid']根本不存在，而且你写的$parid=isset($_POST['parid']);是把布尔值（true/false）赋值给$parid，导致SQL语句变成WHERE parid='1'或parid=''，自然查不到对应的数据。
2. 缺少动态获取数据的逻辑：你只是把parid传到了模态框的input里，但没有触发“根据这个parid去数据库查数据并显示”的动作。

其他小问题 #

• 两个表格都用了id="example"，重复的ID会导致JS和CSS选择器出错，必须改成唯一ID。
• 模态框里的删除按钮ID写错了：id="btndel>"多了个>符号，需要修正。
• 直接把变量拼到SQL语句里有SQL注入风险，必须用预处理语句。

解决方案：用AJAX动态加载数据（推荐） #

这个方案最规范，适合数据需要实时从数据库获取的场景：

步骤1：修改前端表格和按钮 #

把表格ID改成唯一的，按钮的data属性保留，同时给模态框的表格留个空的tbody容器：

<table id="param-table" class="table table-striped" >
  <thead>
    <tr>
      <th>Param ID</th>
      <th>Decription</th>
      <th>Code</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <?php require 'lab/db/dbcon.php'; 
    $query = $con->query("SELECT * FROM param"); 
    while($row=mysqli_fetch_array($query)){ ?>
    <tr>
      <td><?php echo $row['parid'];?></td>
      <td><?php echo $row['parnam']; ?></td>
      <td><?php echo $row['parcod']; ?></td>
      <td>
        <a href="" class="btn btn-danger btn-xs btndel" data-toggle="modal" data-id="<?php echo $row['parid']; ?>" data-target="#delpar">
          <i class="fa fa-trash"></i>
        </a>
      </td>
    </tr>
    <?php } ?>
  </tbody>
</table>

<!-- Start Delete Par Modal -->
<div class="modal fade" id="delpar" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> Are you sure to delete this record?</h5>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" name="parid" id="parid" disabled>
        <table id="del-param-table" class="table table-bordered">
          <thead>
            <tr>
              <th>Decription</th>
              <th>Code</th>
            </tr>
          </thead>
          <tbody id="del-param-body">
            <!-- 这里用AJAX动态填充数据 -->
          </tbody>
        </table>
      </div>
      <div class="modal-footer" style="padding:10px;">
        <button type="button" class="btn btn-danger" name="btndel" id="btndel">
          <i class="fa fa-check"></i>
        </button>
        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-remove"></i></button>
      </div>
    </div>
  </div>
</div>
<!-- End Delete Par Modal -->

步骤2：写AJAX请求获取数据 #

修改你的JS代码，点击删除按钮时，发送AJAX请求到后端脚本，获取对应数据并填充到模态框：

$(document).on("click", ".btndel", function (e) {
  e.preventDefault(); // 阻止a标签默认跳转
  var parid = $(this).data('id');
  $(".modal-body #parid").val(parid);

  // 发送AJAX请求获取数据
  $.ajax({
    url: 'get_param_data.php', // 新建这个后端脚本
    type: 'POST',
    data: {parid: parid},
    dataType: 'json',
    success: function(response) {
      if (response.success) {
        // 填充模态框表格
        var html = `<tr><td>${response.data.parnam}</td><td>${response.data.parcod}</td></tr>`;
        $("#del-param-body").html(html);
      } else {
        $("#del-param-body").html('<tr><td colspan="2">No data found</td></tr>');
      }
    },
    error: function() {
      $("#del-param-body").html('<tr><td colspan="2">Error loading data</td></tr>');
    }
  });

  $('#delpar').modal('show');
});

步骤3：新建后端脚本get_param_data.php #

这个脚本负责接收parid，从数据库查询数据并返回JSON：

<?php
require 'lab/db/dbcon.php';

// 检查parid是否存在
if (!isset($_POST['parid']) || empty($_POST['parid'])) {
  echo json_encode(['success' => false, 'message' => 'Invalid parid']);
  exit;
}

$parid = $_POST['parid'];

// 使用预处理语句防止SQL注入
$query = $con->prepare("SELECT parnam, parcod FROM param WHERE parid = ?");
$query->bind_param("i", $parid); // "i"表示整数类型，如果parid是字符串就用"s"
$query->execute();
$result = $query->get_result();

if ($row = $result->fetch_assoc()) {
  echo json_encode(['success' => true, 'data' => $row]);
} else {
  echo json_encode(['success' => false, 'message' => 'No record found']);
}

$query->close();
$con->close();
?>

替代方案：直接把数据存在按钮的data属性里（适合简单场景） #

如果你的数据量很小，不想写AJAX，可以把每条记录的parnam和parcod也存在按钮的data属性里，点击时直接用JS填充：

修改按钮代码： #

<a href="" class="btn btn-danger btn-xs btndel" data-toggle="modal" 
   data-id="<?php echo $row['parid']; ?>" 
   data-parnam="<?php echo $row['parnam']; ?>" 
   data-parcod="<?php echo $row['parcod']; ?>" 
   data-target="#delpar">
  <i class="fa fa-trash"></i>
</a>

修改JS代码： #

$(document).on("click", ".btndel", function (e) {
  e.preventDefault();
  var parid = $(this).data('id');
  var parnam = $(this).data('parnam');
  var parcod = $(this).data('parcod');
  
  $(".modal-body #parid").val(parid);
  // 直接填充表格
  var html = `<tr><td>${parnam}</td><td>${parcod}</td></tr>`;
  $("#del-param-body").html(html);
  
  $('#delpar').modal('show');
});

这种方式更简单，但如果数据可能被修改，就不如AJAX实时获取准确。

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