如何在PHP中获取JavaScript变量实现无刷新数据库查询

你遇到的核心问题是PHP和JavaScript的执行时机不匹配：PHP是在服务器端生成页面时就执行完毕的，而JavaScript是页面加载后在客户端运行的，所以你没法直接在JS代码里把当前的name变量传给已经执行过的PHP代码。用Cookie需要刷新才能让PHP读到新值，肯定不是最优解，这里推荐用AJAX异步请求来实现无刷新传递参数并获取数据库数据。

步骤1：重构前端JavaScript代码 #

把原来混合PHP的JS代码改成异步请求，点击列表项时发送请求到后端PHP脚本，拿到数据后再渲染到页面：

<ul id="listmhs">
  <li class="daftar">Budi</li>
  <li class="daftar">Indah Setia</li>
  <li class="daftar">Tono</li>
</ul>

<script>
const listmhs = document.getElementById('listmhs');
const daftarItems = document.querySelectorAll('.daftar');

listmhs.addEventListener('click', async function(e) {
  const target = e.target;
  if (target.classList.contains('daftar')) {
    // 检查是否已经加载过子列表
    const existingUl = target.querySelector('ul');
    if (!existingUl) {
      const name = target.textContent.trim();
      try {
        // 发送异步请求到PHP后端
        const response = await fetch('get_mahasiswa.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: `nama=${encodeURIComponent(name)}` // 编码参数防止乱码
        });

        if (!response.ok) throw new Error('请求失败');
        const mahasiswaData = await response.json();

        // 创建子列表并渲染数据
        const tagul = document.createElement('ul');
        mahasiswaData.forEach(item => {
          const tagli = document.createElement('li');
          tagli.textContent = item.nama; // 这里可以根据需要显示更多字段，比如item.nim、item.jurusan等
          tagul.appendChild(tagli);
        });

        target.appendChild(tagul);
      } catch (error) {
        console.error('获取数据出错:', error);
        alert('加载数据失败，请稍后重试');
      }
    } else {
      // 切换显示/隐藏
      existingUl.classList.toggle('hidden');
    }
  }
});
</script>

步骤2：编写后端PHP脚本（get_mahasiswa.php） #

这个脚本负责接收前端传来的nama参数，查询数据库并返回JSON格式的数据：

<?php
// 数据库连接配置（根据你的实际情况修改）
$host = 'localhost';
$dbname = '你的数据库名';
$username = '你的用户名';
$password = '你的密码';

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

  // 获取前端传来的参数
  $nama = $_POST['nama'] ?? '';
  if (empty($nama)) {
    echo json_encode([]);
    exit;
  }

  // 使用预处理语句防止SQL注入！非常重要
  $sql = "SELECT * FROM mahasiswa WHERE nama = :nama";
  $stmt = $pdo->prepare($sql);
  $stmt->bindParam(':nama', $nama, PDO::PARAM_STR);
  $stmt->execute();

  // 获取查询结果并转为数组
  $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

  // 返回JSON数据
  header('Content-Type: application/json');
  echo json_encode($result);
} catch(PDOException $e) {
  // 错误处理（生产环境可以隐藏具体错误信息）
  header('HTTP/1.1 500 Internal Server Error');
  echo json_encode(['error' => $e->getMessage()]);
}
?>

关键注意事项 #

• SQL注入防护：一定要用预处理语句（prepare + bindParam），绝对不能直接把用户输入拼进SQL语句里，这是安全底线。
• 字符编码：确保数据库连接和页面都用utf8mb4编码，避免中文乱码。
• 错误处理：前端要处理请求失败的情况，后端也要捕获异常并返回合理的错误信息。
• 参数编码：用encodeURIComponent编码传递的参数，防止特殊字符导致请求出错。

这样修改后，点击列表项时就会异步获取对应的数据，不需要刷新页面就能显示结果，完美解决你之前的问题。

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