javascript - 使用 Javascript 将带有 mySql 数据库的 php 文件转换为 html

Question

所以我试图创建一个使用 javascript、PHP 和 CSS 的 HTML。我在弄清楚如何通过使用 javascript 函数单击按钮来获取拉入我的数据库的 PHP 以在网站上发布时遇到问题。我试图设置 jquery 和 ajax，但我似乎无法让它工作。一切都按应有的方式连接。我已经用谷歌搜索了很多东西，所以我想我会发帖看看是否有人可以帮助我。如果我将 PHP 文件发布到我的 HTML 中，它可以正常工作，但我有多个查询需要与一个按钮相关联。如果我能让一个按钮工作，我就可以开始了。谢谢。

JS

function mad_hosp(str) {
    if(str == 0){ 
        document.getElementById("output").innerHTML = "Error.";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("output").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "madison_narc.php?",  true);
        xmlhttp.send();
    }
}

这是我的 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()"> 
                <a href=("#") class="button">Huntsville Hospital</a>
            </button>
            <button onclick="W&C_hosp()"> 
                <a href=("#") class="button">Womens and Childrens Hospital</a>
            </button>
            <button onclick="mad_hosp()">
                <a href=("#") class="button">Madison Hospital</a>
            </button>
        </div>
    </div> 
</div>


<p>Waiting for the location to be selected... <id="output"></p>

PHP

 <?php
 $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>" . $row['MedID']."</td>";
        echo "<td>" . $row ['MedicationDescription']."</td>";
        echo "<td>" . $row ['TotalOnHand']."</td>";
        echo "<td>" . $row ['StationName']."</td>";
        echo "</tr>";
     }
     echo "</table>";
 }
 ?>

Answer 1

这看起来不像有效标记。

<p>Waiting for the location to be selected... <id="output"></p>

改用这个:

<div id="output">
    <p>Waiting for the location to be selected... </p>
</div>

document.getElementById("output") 正在寻找具有值为“output”的 id 属性的元素，而不是 id 元素。