为什么我的AJAX没有加载到我的网页上？

Question

我已经设置了JavaScript和AJAX，它应该从受限于一组过滤器的数据库中获取数据，并返回与这些过滤器匹配的结果表。 我以为我已经正确设置了代码，但是当我提交搜索过滤器表单时，页面重新加载而没有其他任何事情发生。 我无法解决我出错的地方！

connection.php只是一个包含我的数据库详细信息/用户名/密码的文件，我知道它正常工作。 我已经仔细研究了语法错误，找不到任何错误，所以它必须与我编写代码的方式有关。 但是，我对这一切都很陌生，所以我真的很难看到我做错了什么。 任何帮助将非常感谢！

我的javascript：

 function showStock(search, genre, publisher, minyear, maxyear) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("results").innerHTML = this.responseText;
        }

        xmlhttp.open("GET", "stock.php?search=" + search + "&genre=" + genre + "&publisher=" + publisher +
            "&min-year=" + min - year + "&max-year=" + max - year, true);
        xmlhttp.send();
    }
}

我的过滤形式：

<form id="filters">
    <label> Search by Title:</label><br>
    <input type="search" name="search">
    <label>Genre:</label><br>
    <select name='genre'>
        <option value='All'> All </option>
        <?php
            function dropdownOptions($category) {
                require('connection.php');
                $sql = "SELECT DISTINCT ".$category." FROM stock";
                $result = $conn->query($sql);
                while($row = $result->fetch_assoc()) {
                    echo "<option value='" . $row[$category] . "'>" . $row[$category] . "</option>";
                }
            }
            dropdownOptions("genre");
        ?>
    </select>
    <label>Publisher:</label><br>
    <select name="publisher">
        <option value="all"> All</option>
        <?php
            dropdownOptions("publisher");
        ?>
    </select>
    <div class="year">
        <label>Release Year:</label><br>
        <input  type="number" name="min-year" min="1970" max="2018">
        <label>&nbsp; to &nbsp;</label>
        <input  type="number" name="max-year" min="1970" max="2018">
    </div>
    <div class="buttons">
        <button type="submit" onclick="showStock(search, genre, publisher, min-year, max-year)">SEARCH</button>
        <button type="reset">CLEAR</button>
    </div>
</form>

我的stock.php代码：

<?php
    require('connection.php');
    $search = $_GET['search'];
    $publisher = $_GET['publisher'];
    $genre = $_GET['genre'];
    $minyear = intval($_GET['min-year']);
    $maxyear = intval($_GET['max-year']);

    if ($search == "") {
        $searchQ = "";
    } else {
        $searchQ = "AND CONTAINS(title, $title) ";
    }

    if ($genre == "all") {
        $genreQ = "";
    } else {
        $genreQ = "AND genre = $genre ";
    }   

    if ($publisher == "all") {
        $publisherQ = "";
    } else {
        $publisherQ = "AND publisher = $publisher ";
    }

    if ($minyear == "" && $maxyear == "") {
        $yearQ = "";
    } else if ($minyear == "" && $maxyear != "") {
        $yearQ = "AND release_date <= $maxyear ";
    } else if($minyear != "" && $maxyear == "") {
        $yearQ = "AND release_date >= $minyear ";
    } else if ($minyear != "" && $maxyear != ""){
        $yearQ = "AND release_date BETWEEN $minyear AND $maxyear ";
    }

    $sql = "SELECT * FROM stock WHERE id > 0".$searchQ.$genreQ.$publisherQ.$yearQ.";";
    $result = $conn->query($sql);

    echo "<table>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Publisher</th>
              <th>Genre</th>
              <th>Price</th>
              <th>Release Year</th>
              <th>Stock Units</th>
            </tr>";
    while($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['id'] . "</td>";
        echo "<td>" . $row['title'] . "</td>";
        echo "<td>" . $row['publisher'] . "</td>";
        echo "<td>" . $row['Hometown'] . "</td>";
        echo "<td>" . $row['genre'] . "</td>";
        echo "<td>" . $row['price'] . "</td>";
        echo "<td>" . $row['release_date'] . "</td>";
        echo "<td>" . $row['stock_units'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
    mysqli_close($con);
?>

我希望在我的网页上加载一个相关结果表（在我的uni服务器上托管： https ： //students.emps.ex.ac.uk/admt201/webdev/stock-lookup.php ），但所有这一切都发生了是我的搜索参数被添加到原始网页的网址，没有新的加载。

Answer 1

这不是一个答案，而是一个有多个建议的长评论。

这种性质的问题最好通过分解并确认每个部分来进行攻击。 因为PHP很难排除故障（因为如果有错误它不会生成任何有用的消息它只是异常终止）我建议你先解决PHP方面的问题。

因此，制作stock.php文件的副本，并用一些硬编码数据替换$_GET[]变量赋值。 然后，确保它输出成功消息（以确保您收到预期的数据）并将该修改后的stock.php文件作为独立文件运行。 您首先需要确认PHP是否正常工作，因为如果不是这样，您可以对javascript端进行故障排除，直到奶牛回家，真正的幸福将继续躲避您。

在对PHP进行故障排除时，另一种有用的故障排除方法是在整个文件中添加大量文件写入，如下所示：

$hF = fopen("__debug.log", "a");
//run a couple lines of code
fwrite($hF, "Got to here 01");
//run a few more lines of code
fwrite($hF, "Got to here 02");
//repeat...

然后，检查创建的__debug.log文件，看看是否有所有预期的文件写入，或者代码是否在某处死亡。 否则，你怎么知道的？

请注意，有一个名为PHPConsole的Chrome扩展程序允许您将控制台消息输出到浏览器，但是开始工作可能有点棘手 - 而上面的fwrite()方法非常可靠，并且容易实施。

类似地，在javascript端，使用一堆console.log()语句对代码进行限制，以确定问题的显示位置。