如何通过不同链接动态加载不同查询结果到同一模态框中-html教程-PHP中文网

如何通过不同链接动态加载不同查询结果到同一模态框中

本文介绍在 php + bootstrap 环境下，如何让多个 `` 标签触发同一个模态框（modal），但根据点击来源动态加载对应 sql 查询结果，避免重复定义多个模态框或硬编码逻辑。

要实现“单个模态框、多数据源”的效果，核心在于解耦 HTML 渲染与数据获取逻辑：原始代码中所有查询（$tekmuhadiTab 和 $tekmuhadiTab2）在页面加载时即执行，并在模态框 HTML 中静态输出（while(odbc_fetch_row(...))），这导致无法按需切换数据源。

✅ 正确做法是采用 AJAX 驱动的动态内容加载——点击链接时不直接打开含死数据的模态框，而是先发送请求获取对应查询结果，再注入到模态框中并显示。

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

✅ 推荐方案：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">数据加载失败，请重试。');
  });
});
</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">无效的数据请求。';
    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 '

'; echo ''; while (odbc_fetch_row($result)) { echo ''; echo ''; echo ''; echo ''; echo ''; } echo '