使用PHP、AJAX和jQuery从MySQL拉取数据并在弹窗展示的实现方案

前端改造步骤 #

1. 统一弹窗结构 #

删掉重复的弹窗div，只保留一个通用弹窗，默认隐藏：

<!-- 单个通用弹窗 -->
<div id="info-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border: 1px solid #ccc; z-index: 1000;">
  <button id="close-modal">关闭</button>
  <div id="modal-content"></div>
</div>

2. 绑定SVG路径点击事件 #

用JavaScript给所有SVG路径添加点击监听，获取路径id后发起AJAX请求：

// 获取所有SVG路径元素
const svgPaths = document.querySelectorAll('svg path');
// 获取弹窗和内容容器
const modal = document.getElementById('info-modal');
const modalContent = document.getElementById('modal-content');
const closeBtn = document.getElementById('close-modal');

// 遍历路径绑定点击事件
svgPaths.forEach(path => {
  path.addEventListener('click', function() {
    const pathId = this.id; // 获取当前点击路径的id
    if (!pathId) return; // 无id则跳过

    // 发起AJAX请求
    fetch('get_path_info.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `path_id=${encodeURIComponent(pathId)}`
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        // 填充弹窗内容，根据你的数据库字段调整
        modalContent.innerHTML = `
          <h3>${data.name}</h3>
          <p>${data.description}</p>
          <p>属性值：${data.value}</p>
        `;
        modal.style.display = 'block'; // 显示弹窗
      } else {
        modalContent.innerHTML = '<p>未找到对应信息</p>';
        modal.style.display = 'block';
      }
    })
    .catch(error => {
      console.error('请求出错:', error);
      modalContent.innerHTML = '<p>加载信息失败，请重试</p>';
      modal.style.display = 'block';
    });
  });
});

// 关闭弹窗事件
closeBtn.addEventListener('click', function() {
  modal.style.display = 'none';
});

// 点击弹窗外部关闭
window.addEventListener('click', function(event) {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

后端接口实现（以PHP为例） #

创建get_path_info.php文件，负责接收前端的id参数，查询数据库并返回JSON：

<?php
// 数据库连接信息，根据实际配置修改
$host = 'localhost';
$dbname = 'your_database';
$username = 'your_username';
$password = 'your_password';

try {
  // 建立数据库连接
  $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // 接收前端传的path_id
  $pathId = $_POST['path_id'] ?? '';
  if (empty($pathId)) {
    echo json_encode(['success' => false, 'message' => '缺少路径ID']);
    exit;
  }

  // 预处理SQL，防止注入
  $stmt = $pdo->prepare("SELECT * FROM properties WHERE id = :path_id");
  $stmt->bindParam(':path_id', $pathId);
  $stmt->execute();

  $result = $stmt->fetch(PDO::FETCH_ASSOC);
  if ($result) {
    // 返回查询到的信息，替换为你的数据库字段名
    echo json_encode([
      'success' => true,
      'name' => $result['name'],
      'description' => $result['description'],
      'value' => $result['value']
    ]);
  } else {
    echo json_encode(['success' => false, 'message' => '未找到对应数据']);
  }
} catch(PDOException $e) {
  echo json_encode(['success' => false, 'message' => '数据库错误：' . $e->getMessage()]);
}
?>

关键注意事项 #

• 确保SVG路径都有唯一的id，且与数据库properties表中的id字段对应
• 后端必须使用预处理语句避免SQL注入风险
• 根据实际数据库字段调整前端填充内容和后端返回的字段名
• 可按需优化弹窗样式，比如添加半透明遮罩层、显示/隐藏动画等

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