选项按钮不会在PHP中自动重新加载页面，我无法在代码中找到错误

Question

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

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

document.getElementById("album-sort").addEventListener("change", function (e) {
                let current_url = window.location.href
                window.location = updateQueryStringParameter(current_url, "sort", e.value)
            })

这是我自己的功能：

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";

    $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"; ?>

Answer 1

尝试将此添加到您的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"; ?>