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

Question

我正在做我的 PHP 作业，我想使用选项按钮，当我在它们之间进行选择时，它们会自动重新加载页面。我试图弄清楚可能是什么问题，但我找不到代码中的错误。以下是我到目前为止所做的，但由于某种原因它不起作用。

这是我的javascript代码（相册-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"; // 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"; ?>

Answer 1

尝试将此添加到您的相册-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, '' + key + "=" + value + '');
  }
  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"; ?>

Answer 2

在我再次查看你的答案并思考了一段时间后，我得出的结论是，可能可以用更短的方式解决这个问题。由于它仍然有效，我认为代码是正确的，但如果我错了请纠正我。

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

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

Option buttons don't reload page automatically in PHP, I cannot find the error in my code

javascript

php

html-select

reload

isset