javascript - 无法让ajax与PHP一起使用从MySQL加载信息表

Question

所以基本上我有一个下拉列表，显示来自 MySQL 表(帐户)的数据，该表将显示用户帐户。当用户选择其中一个帐户时，我希望它显示该帐户拥有的所有设施(设施表)。

我有显示帐户的下拉菜单，但它不会运行 onChange() 函数来加载我的表。这是我拥有的一切，有人可以告诉我为什么我的函数根本没有被触发吗？

Index.php

<?php
    require_once('sessionstart');
    require_once('header.php');
    require_once('dbconn.php');

    //Accounts
    require_once('getaccounts.php');

    //Facility
    echo "<div id='facilities'>";
        require_once('getfacility.php');
    echo "</div>";
?>


<?php
    require_once 'footer.php';
?>

getaccounts.php

<?php
//require files
require_once('sessionstart.php');
require_once('dbconn.php');

//clear options variable
$options = "";

//connect to db and test connection.
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);        
if (!$dbc) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT account_id, account_name FROM accounts";
$data = mysqli_query($dbc, $sql);

//loop through data and display all accounts
while ($row = mysqli_fetch_array($data)) {
         $options .="<option>" . $row['account_name'] . "</option>";
}

//account drop down form
$accountDropDown="<form id='account' name='account' method='post' action='getaccounts.php'>
                    <label>Accounts: </label>
                    <select name='account' id='account' onchange='showFacilities(this.value)'>
                        <option selected='selected' disabled='disabled' value=''>Select account</option>
                    " . $options . "
                    </select>
                </form>";

//echo out account form
echo $accountDropDown;
?>

这可以按照我需要的方式工作，并显示下拉列表中的所有帐户。但是我似乎无法让 showFacilities() 函数工作。

getfacility.php

<?php
require_once('dbconn.php');

$q = intval($_GET['q']);

$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);        
if (!$dbc) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM facility "
     . "INNER JOIN accounts ON accounts.account_id = facility.account_id "
     . "WHERE facility.account_id = '".$q."'";

$data = mysqli_query($dbc, $sql);

echo   "<table>
        <tr>
        <th>Facility Number</th>
        <th>Facility Name</th>
        <th>Facility Address</th>
        <th>Facility City</th>
        </tr>";

    //loop through data and display all accounts
    while ($row = mysqli_fetch_array($data)) {

        echo "<tr>";
        echo "<td>" . $row['facility_number'] . "</td>";
        echo "<td>" . $row['facility_name'] . "</td>";
        echo "<td>" . $row['facility_address'] . "</td>";
        echo "<td>" . $row['facility_city'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
?>

footer.php(包括 showFacilities())

<script>
    function showFacilities(account){

        //I wrote this to test and see if this function was even being triggered.
        document.alert("test");

        if(account == ""){
            return;
        }
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("facilities").innerHTML = xmlhttp.responseText;
            }
        }
        else{
            xmlhttp.open("GET","getfacility.php?q="+account,true);
            xmlhttp.send();
        }
    }
</script>

        <footer>
                <p>Copyright &copy</p>
        </footer>
    </body>
</html>

请告诉我我是否做错了，我是否正确安排了一切？为什么这个功能没有被命中？

我尝试了很多不同的事情，但我似乎无法让它发挥作用，任何帮助或建议，甚至朝着正确方向的插入都将非常感激，谢谢。

Answer 1

您的 if else 子句不相加(因此您的脚本生成脚本错误，很可能是语法错误)。

    else{
        xmlhttp.open("GET","getfacility.php?q="+account,true);
        xmlhttp.send();
    }

这篇文章没有附带 IF。

这是正确的:

    if(account == ""){
        return;
    }
    else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("facilities").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","getfacility.php?q="+account,true);
        xmlhttp.send();
    }

旁注:当您使用 onchange 时，为什么要在您的 select(可以加载帐户的位置)周围创建一个表单包装器> 触发 XmlHTTPRequest 的事件？