在不重新加载页面的情况下更改 URL

Question

我正在开发一个博客网站，但我遇到了一些分页问题。

在分享我的代码之前；

• 网站上的所有代码都是我写的，尽量不使用 ext 库。
• 我只使用 JQuery
• 所以，我愿意接受任何建议。

现在，代码：

$(document).ready(function () {
  var pageItem = $('.pagination li').not('.prev,.next');
  var prev = $('.pagination li.prev');
  var next = $('.pagination li.next');

  prev.addClass('disabled');
  pageItem.first().addClass('active');

  pageItem.click(function () {
    pageItem.removeClass('active');
    $(this).not('.prev,.next').addClass('active');

    if ($(this).next().hasClass('next')) {
      next.addClass('disabled');
      prev.removeClass('disabled');
    } else {
      next.removeClass('disabled');
    }

    if ($(this).prev().hasClass('prev')) {
      prev.addClass('disabled');
      next.removeClass('disabled');
    } else {
      prev.removeClass('disabled');
    }
  });

  next.click(function () {
    $('li.active').removeClass('active').next().addClass('active');

    if (next.prev().hasClass('active')) {
      next.addClass('disabled');
      prev.removeClass('disabled');
    } else {
      prev.removeClass('disabled');
    }
  });

  prev.click(function () {
    $('li.active').removeClass('active').prev().addClass('active');

    if (prev.next().hasClass('active')) {
      prev.addClass('disabled');
      next.removeClass('disabled');
    } else {
      next.removeClass('disabled');
    }
  });
});

.pagination {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 15px;
}
.pagination li {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  transition: background-color 0.5s;
}
.pagination li a {
  text-decoration: none;
  font-size: 15px;
  color: #7c3c01;
}
.disabled {
  pointer-events: none;
}
.disabled a span {
  color: #000000;
}
.active {
  background-color: #e99d57;
  color: #633001;
}
.pagination li:hover:not(.active) {
  background-color: #f0b680;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="prev">
                <a href="#" aria-label="Anterior">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <!--
            Here's my php code to load the articles from db
            
            <?php
            // PAGINACION
            $total_art = mysqli_num_rows($entradas);
            $art_x_page = 4;
            $pages = ceil($total_art / $art_x_page);

            for ($i = 0; $i < $pages; $i++) : ?>
                <li>
                    <a href="index.php?pagina=<?= $i + 1; ?>"><?= $i + 1; ?></a>
                </li>
            <?php endfor; ?>
            
            To make the example work, i will add some static li
            -->

                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                
            <li class="next">
                <a href="#" aria-label="Siguiente">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

如果你测试我的分页，你会发现它工作得很好。 我的问题是 php 部分，当我添加它时，页面重新加载以带来数据并刷新页面。因此样式/脚本不再起作用。每当页面重新加载时，样式都是相同的（.prev 是 .disabled，第一个 li 是 .active）。

我需要的是从数据库加载数据而不重新加载页面（所以我的样式/脚本仍然有效）或者在重新加载后修改我的脚本的方法。 我一直在阅读一些关于 AJAX 的内容，我认为这就是我所需要的，但我无法将它实现到我的代码中，我认为我不太了解它。

谢谢！

Answer 1

您正在寻找的是ajaxs 来解决您的问题 所以假设您当前的代码在 content.php 中

content.php

<nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="prev">
                <a href="#" aria-label="Anterior">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

                <li class="page_num">
                    <a href="#">1</a>
                </li>
                <li class="page_num">
                    <a  href="#">2</a>
                </li>
                <li class="page_num">
                    <a href="#">3</a>
                </li>

            <li class="next">
                <a href="#" aria-label="Siguiente">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
<div id="result">
<!-- Load Data here -->
</div>
<script>
 $( ".page_num").click(function(e) { 

    let page_num = $(this).text().trim();
    $.ajax({
      url: '/load_data.php', //location to your php file
      type: 'POST',
      data: {
          page_num: page_num //data to send to the load_data.php file
      },

      success: function(data) {
            $("#result").html(data);
      }

    });

 }); 
</script>

load_data.php

<?php 
$page_num = $_POST["page_num"];
//your php logic here 
echo "MY Content";

?>

所以基本上你在 load_data.php 文件中回显的任何内容都会在 div id="result" 的 content.php 文件中得到输出 现在这将加载您的内容而无需重新加载页面