本文介绍在 php + bootstrap 环境下，如何让多个 `` 标签触发同一个模态框（modal），但根据点击来源动态加载对应 sql 查询结果，避免重复定义多个模态框或硬编码逻辑。
要实现“单个模态框、多数据源”的效果，核心在于解耦 HTML 渲染与数据获取逻辑：原始代码中所有查询（$tekmuhadiTab 和 $tekmuhadiTab2）在页面加载时即执行，并在模态框 HTML 中静态输出（while(odbc_fetch_row(...))），这导致无法按需切换数据源。
✅ 正确做法是采用 AJAX 驱动的动态内容加载——点击链接时不直接打开含死数据的模态框，而是先发送请求获取对应查询结果，再注入到模态框中并显示。
✅ 推荐方案：AJAX + Bootstrap Modal（服务端 PHP + 前端 JS）
1. 修改 HTML 链接，携带查询标识
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-query="tekmuhadi" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal" class="modalaltfiltre fas fa-search text-sm opacity-10">查表1</a> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-query="tekmuhadi2" data-toggle="modal" data-target="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal" class="modalaltfiltre fas fa-search text-sm opacity-10">查表2</a>
2. 保留单一模态框结构（移除 PHP 循环）
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">加载中...</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="modalContent">
<div class="text-center"><span class="spinner-border spinner-border-sm"></span> 正在加载...</div>
</div>
</div>
</div>
</div>
</div>3. 添加 JavaScript 监听与异步加载逻辑
<script>
$('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyModal').on('show.bs.modal', function (event) {
const button = $(event.relatedTarget); // 触发按钮
const queryType = button.data('query'); // 如 'tekmuhadi'
const modal = $(this);
// 设置标题（可选）
modal.find('.modal-title').text(
queryType === 'tekmuhadi' ? '技术部门人员列表' : '技术部门备选名单'
);
// AJAX 加载对应数据
$.get('fetch_data.php', { query: queryType }, function (data) {
modal.find('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmodalContent').html(data);
}).fail(function () {
modal.find('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmodalContent').html('<div class="alert alert-danger">数据加载失败，请重试。</div>');
});
});
</script>4. 创建 fetch_data.php 统一处理查询（安全+可扩展）
<?php
// fetch_data.php —— 使用 PDO 或 ODBC 安全执行查询
$conn = odbc_connect(/* your DSN */);
// 白名单校验，防止参数注入
$allowedQueries = ['tekmuhadi', 'tekmuhadi2'];
$queryKey = $_GET['query'] ?? '';
if (!in_array($queryKey, $allowedQueries)) {
http_response_code(400);
echo '<div class="alert alert-warning">无效的数据请求。</div>';
exit;
}
// 定义查询语句（建议移至配置或 switch）
$sqlMap = [
'tekmuhadi' => "SELECT name, dept, phone FROM tech_staff",
'tekmuhadi2' => "SELECT name, status, last_updated FROM tech_backup"
];
$result = odbc_exec($conn, $sqlMap[$queryKey]);
if (!$result) {
echo '<div class="alert alert-danger">查询执行失败。</div>';
exit;
}
// 渲染表格（注意：odbc_result 字段索引从 1 开始）
echo '<table class="table table-sm mb-0">';
echo '<thead><tr><th>姓名</th><th>部门/状态</th><th>联系方式/更新时间</th></tr></thead><tbody>';
while (odbc_fetch_row($result)) {
echo '<tr>';
echo '<td>' . htmlspecialchars(odbc_result($result, 1)) . '</td>';
echo '<td>' . htmlspecialchars(odbc_result($result, 2)) . '</td>';
echo '<td>' . htmlspecialchars(odbc_result($result, 3)) . '</td>';
echo '</tr>';
}
echo '</tbody></table>';
?>⚠️ 注意事项
- 绝不暴露原始 SQL 或变量名到前端：使用白名单（如 $allowedQueries）严格限制可执行查询类型；
- 始终转义输出内容：用 htmlspecialchars() 防止 XSS；
- ODBC 字段索引从 1 开始，且需确保字段数一致，否则 odbc_result($r,3) 可能报错；
- 若需分页/搜索等高级功能，应在 fetch_data.php 中支持 GET 参数（如 ?query=tekmuhadi&page=2）；
- 替代方案（不推荐）：服务端预执行全部查询并缓存结果，通过 data-* 属性传入 JSON 数据——仅适用于极小数据集，存在内存与安全风险。
通过该架构，你只需维护一个模态框、一个后端接口和清晰的查询映射，即可灵活支持任意数量的数据源，真正实现「一次定义、按需渲染」。
