Javascript 选项按钮不'；t在PHP中自动重新加载页面，我在代码中找不到错误

我正在处理我的PHP任务，我想使用选项按钮，当我在它们之间进行选择时，它们会自动重新加载页面。我试图找出问题所在，但在代码中找不到错误。下面是我到目前为止所做的，但由于某些原因它不起作用

这是我的javascript代码（album list.js）：

这是我自己的职责：

function get_album_list($offset = 0, $limit = PAGE_LIMIT, $artist = null, $sorting = "title_asc")
{
    global $db;    
    $sql = "SELECT * FROM albums";    
    if ($artist) {
        $artist = $db->real_escape_string($artist);

        $sql .= " WHERE artist = '$artist'";
    }    
    $order = "";
    switch ($sorting) {
        case "title_desc":
            $order = " ORDER BY title DESC";
        break;
        case "year_asc":
            $order = " ORDER BY year ASC";
        break;
        case "year_desc":
            $order = " ORDER BY year DESC";
        break;
        default:
            $order = " ORDER BY title ASC";
        break;
    }  
    $sql .= $order;
    $sql .= " LIMIT $limit OFFSET $offset";
    $result = $db->query($sql);    
    return $result;
}

这就是我想使用的地方：

<?php
    $artist = isset($_GET["artist"]) ? $_GET["artist"] : null;
    $sort = isset($GET["sort"]) ? $_GET["sort"] : "title_asc"; // Here is the mistake. $GET--> $_GET

    $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
    $limit = ($current_page - 1) * PAGE_LIMIT;
    $total_pages = get_album_count($artist) / PAGE_LIMIT;

    $albums = get_album_list($limit, PAGE_LIMIT, $artist, $sort);
?>
<?php
<div class="page page-albums">
    <h2>Just for you</h1>
    <?php if ($albums->num_rows <= 0) : ?>
        <div class="alert alert-warning">
            There is no album
        </div>
    <?php else : ?>
        <div class="album-list">
            <select id="album-sort">
                <option value="title_asc">Title asc</option>
                <option value="title_desc">Title desc</option>
                <option value="year_asc">Release date asc</option>
                <option value="year_desc">Release date desc</option>
            </select>
            <?php while ($album = $albums->fetch_assoc()) : ?>
                <?php include('_album_list_item.php'); ?>
            <?php endwhile; ?>
        </div>
        <ul class="pagination">
            <?php for ($i = 1; $i < $total_pages + 1; $i++) : ?>
                <li>
                    <?php if ($i == $current_page) : ?>
                        <span><?php echo $i; ?></span>
                    <?php else : ?>
                        <a href="<?php echo url('home', ['page' => $i]); ?>"><?php echo $i; ?></a>
                    <?php endif; ?>
                </li>
            <?php endfor; ?>
        </ul>
    <?php endif; ?>
</div>
<script src="<?php echo asset('js/album-list.js'); ?>"></script>
<?php include "functions.php"; ?>

没有相册
标题asc
标题说明
发行日期
发布日期说明




尝试将此添加到您的album-list.js文件中

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

回答您的另一个问题：

<?php
    $artist = isset($_GET["artist"]) ? $_GET["artist"] : null;
    $sort = isset($_GET["sort"]) ? $_GET["sort"] : "title_asc";
    $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
    $limit = ($current_page - 1) * PAGE_LIMIT;
    $total_pages = get_album_count($artist) / PAGE_LIMIT;
    $albums = get_album_list($limit, PAGE_LIMIT, $artist, $sort);
    $titleSelect1 = '';
    $titleSelect2 = '';
    $titleSelect3 = '';
    $titleSelect4 = '';
    if($sort == 'title_asc'){
        $titleSelect1 = 'selected';
    }
    if($sort == 'title_desc'){
        $titleSelect2 = 'selected';
    }
    if($sort == 'year_asc'){
        $titleSelect3 = 'selected';
    }
    if($sort == 'year_desc'){
        $titleSelect4 = 'selected';
    }
?>
<?php
<div class="page page-albums">
    <h2>Just for you</h1>
    <?php if ($albums->num_rows <= 0) : ?>
        <div class="alert alert-warning">
            There is no album
        </div>
    <?php else : ?>
        <div class="album-list">
            <select id="album-sort">
                <option value="title_asc" <?php echo $titleSelect1;?>>Title asc</option>
                <option value="title_desc" <?php echo $titleSelect2;?>>Title desc</option>
                <option value="year_asc" <?php echo $titleSelect3;?>>Release date asc</option>
                <option value="year_desc" <?php echo $titleSelect4;?>>Release date desc</option>
            </select>
            <?php while ($album = $albums->fetch_assoc()) : ?>
                <?php include('_album_list_item.php'); ?>
            <?php endwhile; ?>
        </div>
        <ul class="pagination">
            <?php for ($i = 1; $i < $total_pages + 1; $i++) : ?>
                <li>
                    <?php if ($i == $current_page) : ?>
                        <span><?php echo $i; ?></span>
                    <?php else : ?>
                        <a href="<?php echo url('home', ['page' => $i]); ?>"><?php echo $i; ?></a>
                    <?php endif; ?>
                </li>
            <?php endfor; ?>
        </ul>
    <?php endif; ?>
</div>
<script src="<?php echo asset('js/album-list.js'); ?>"></script>
<?php include "functions.php"; ?>


没有相册
>标题说明
>发布日期说明




在我再次回顾了你的答案并思考了一会儿之后，我得出结论，也许可以用更短的方式解决这个问题。因为它仍然有效，我认为代码是正确的，但是如果我错了，请纠正我

 <?php
        $artist = isset($_GET["artist"]) ? $_GET["artist"] : null;
        $sort = isset($_GET["sort"]) ? $_GET["sort"] : "title_asc";

        $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
        $limit = ($current_page - 1) * PAGE_LIMIT;
        $total_pages = get_album_count($artist) / PAGE_LIMIT;

        $albums = get_album_list($limit, PAGE_LIMIT, $artist, $sort);
    ?>
    <?php include "_header.php"; ?>
    <div class="page page-albums">
        <h2>Just for you</h1>
        <?php if ($albums->num_rows <= 0) : ?>
            <div class="alert alert-warning">
                There is no album
            </div>
        <?php else : ?>
            <div class="album-list">
                <select id="album-sort">
                    <option value="title_asc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "title_asc" ? "selected" : "" : ""?> >Title asc</option>
                    <option value="title_desc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "title_desc" ? "selected" : "" : ""?> >Title desc</option>
                    <option value="year_asc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "year_asc" ? "selected" : "" : ""?> >Release date asc</option>
                    <option value="year_desc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "year_desc" ? "selected" : "" : ""?> >Release date desc</option>
                </select>
                <?php while ($album = $albums->fetch_assoc()) : ?>
                    <?php include('_album_list_item.php'); ?>
                <?php endwhile; ?>
            </div>
            <ul class="pagination">
                <?php for ($i = 1; $i < $total_pages + 1; $i++) : ?>
                    <li>
                        <?php if ($i == $current_page) : ?>
                            <span><?php echo $i; ?></span>
                        <?php else : ?>
                            <a href="<?php echo url('home', ['page' => $i]); ?>"><?php echo $i; ?></a>
                        <?php endif; ?>
                    </li>
                <?php endfor; ?>
            </ul>
        <?php endif; ?>
    </div>
    <script src="<?php echo asset('js/album-list.js'); ?>"></script>
    <?php include "_footer.php"; ?>


只为你
没有相册
>标题说明
>发布日期说明




Put
console.log（'Function was fired！'）
在addEventListener函数中，并告诉我您的控制台说了什么。
未捕获引用错误：HTMLSelectElement中未定义updateQueryStringParameter。（album list.js:5）
我已经写好了，但是我忘了添加我的PHP代码。在我这样做之后，当我使用按钮时，它总是跳回第一个选项（标题asc），页面上的元素不会发生任何变化。这是因为它重新加载了。那么我如何在不重新加载的情况下返回参数呢？我添加了一个“回调”。对不起，我的意思是我解决了问题：
 <?php
        $artist = isset($_GET["artist"]) ? $_GET["artist"] : null;
        $sort = isset($_GET["sort"]) ? $_GET["sort"] : "title_asc";

        $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
        $limit = ($current_page - 1) * PAGE_LIMIT;
        $total_pages = get_album_count($artist) / PAGE_LIMIT;

        $albums = get_album_list($limit, PAGE_LIMIT, $artist, $sort);
    ?>
    <?php include "_header.php"; ?>
    <div class="page page-albums">
        <h2>Just for you</h1>
        <?php if ($albums->num_rows <= 0) : ?>
            <div class="alert alert-warning">
                There is no album
            </div>
        <?php else : ?>
            <div class="album-list">
                <select id="album-sort">
                    <option value="title_asc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "title_asc" ? "selected" : "" : ""?> >Title asc</option>
                    <option value="title_desc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "title_desc" ? "selected" : "" : ""?> >Title desc</option>
                    <option value="year_asc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "year_asc" ? "selected" : "" : ""?> >Release date asc</option>
                    <option value="year_desc" <?php echo isset($_GET["sort"]) ? $_GET["sort"] == "year_desc" ? "selected" : "" : ""?> >Release date desc</option>
                </select>
                <?php while ($album = $albums->fetch_assoc()) : ?>
                    <?php include('_album_list_item.php'); ?>
                <?php endwhile; ?>
            </div>
            <ul class="pagination">
                <?php for ($i = 1; $i < $total_pages + 1; $i++) : ?>
                    <li>
                        <?php if ($i == $current_page) : ?>
                            <span><?php echo $i; ?></span>
                        <?php else : ?>
                            <a href="<?php echo url('home', ['page' => $i]); ?>"><?php echo $i; ?></a>
                        <?php endif; ?>
                    </li>
                <?php endfor; ?>
            </ul>
        <?php endif; ?>
    </div>
    <script src="<?php echo asset('js/album-list.js'); ?>"></script>
    <?php include "_footer.php"; ?>