如何通过JavaScript点击按钮调用PHP获取MySQL数据并展示到HTML

我帮你梳理了代码里的几个关键问题，修正后应该就能让Madison Hospital按钮正常工作了，你可以参考这个逻辑搞定其他按钮：

1. HTML里的核心错误 #

• 你的结果展示元素写法错误：<id="output">是无效的HTML，JavaScript找不到这个元素，导致查询结果无法渲染。应该改成<span id="output"></span>或者<div id="output"></div>。
• 按钮内部嵌套了<a>标签，点击时会优先触发链接的跳转行为（哪怕href是#），可能中断JS函数执行。建议直接移除<a>，给按钮加样式类就行。

2. JavaScript的小问题 #

• mad_hosp函数定义了参数str，但调用时没传参，虽然当前逻辑影响不大，但最好保持调用和定义一致；另外AJAX请求URL末尾多了个不必要的问号，会导致请求路径异常，建议去掉。

3. PHP的必要补充 #

• 确保你的madison_narc.php包含数据库连接代码，否则mysqli_query会因为找不到$conn变量报错。

修正后的完整代码 #

HTML部分 #

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <button onclick="main_hosp()" class="button">Huntsville Hospital</button>
      <button onclick="W_C_hosp()" class="button">Womens and Childrens Hospital</button>
      <!-- 移除内部a标签，直接给按钮应用样式 -->
      <button onclick="mad_hosp()" class="button">Madison Hospital</button>
    </div>
  </div>
</div>
<p>Waiting for the location to be selected... <span id="output"></span></p>

JavaScript部分 #

function mad_hosp() {
  // 简化参数逻辑，若后续需要传参可以再调整
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    // 确保请求成功完成
    if (this.readyState === 4 && this.status === 200) {
      document.getElementById("output").innerHTML = this.responseText;
    }
  };
  // 修正URL，去掉多余问号
  xmlhttp.open("GET", "madison_narc.php", true);
  xmlhttp.send();
}

PHP部分（添加数据库连接） #

<?php
// 替换成你的数据库配置
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

// 建立数据库连接
$conn = mysqli_connect($servername, $username, $password, $dbname);

// 检查连接是否成功
if (!$conn) {
  die("数据库连接失败: " . mysqli_connect_error());
}

$sql = "SELECT 
          currentinventoryaudit.MedId as MedID, 
          currentinventoryaudit.MedDescription as MedicationDescription, 
          SUM(currentinventoryaudit.CurrentCount) as TotalOnHand, 
          'MadisonNarcVault' as StationName 
        FROM currentinventoryaudit 
        WHERE currentinventoryaudit.StationName LIKE '%CW101296%' 
          AND currentinventoryaudit.MedDescription NOT LIKE 'key%' 
          AND currentinventoryaudit.MedDescription NOT LIKE '%zz-%' 
          AND currentinventoryaudit.MedDescription NOT LIKE '%alp%' 
        GROUP BY 2 
        ORDER BY 2 ASC;";

$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);

// 输出表格
echo "<table> 
        <tr> 
          <th>MedID</th> 
          <th>Medication Description</th> 
          <th>Total On Hand</th> 
          <th>Station Name</th> 
        </tr>";

if ($resultCheck > 0) {
  while ($row = mysqli_fetch_assoc($result)) {
    echo "<tr>";
    echo "<td>" . htmlspecialchars($row['MedID']) . "</td>";
    echo "<td>" . htmlspecialchars($row['MedicationDescription']) . "</td>";
    echo "<td>" . htmlspecialchars($row['TotalOnHand']) . "</td>";
    echo "<td>" . htmlspecialchars($row['StationName']) . "</td>";
    echo "</tr>";
  }
} else {
  // 无结果时提示
  echo "<tr><td colspan='4'>未找到匹配的记录</td></tr>";
}

echo "</table>";

// 关闭数据库连接
mysqli_close($conn);
?>

测试建议 #

1. 确保madison_narc.php和HTML文件在同一目录下，或者根据实际路径调整AJAX请求的URL。
2. 打开浏览器开发者工具（F12），切换到Network标签，点击按钮查看AJAX请求的状态：
   • 如果状态码是200，查看Response内容是否是预期的表格。
   • 如果请求失败，切换到Console标签查看错误信息，针对性排查。

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