Почему мой 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);
?>

Я ожидал, что таблица релевантных результатов будет загружена на мою веб-страницу (размещена на моем универ-сервере здесь: https://students.emps.ex.ac.uk/admt201/webdev/stock-lookup.php),, но вместо этого все, что происходит, это то, что мои параметры поиска добавляются в URL исходной веб-страницы и ничегоновые грузы.

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 и посмотрите, получили ли вы все ожидаемые записи в файл или код где-то умер. Иначе откуда ты знаешь?

Обратите внимание, что существует расширение для Chrome, которое называется PHPConsole , которое позволяет выводить консольные сообщения в браузер, но может быть немного сложно начать работать с самого начала - тогда как вышеприведенный fwrite() метод надежный и легко реализуемый.

Аналогичным образом, на стороне javascript добавьте в свой код набор console.log() операторов, чтобы определить, где возникают проблемы.