jQuery AJAX 分页如何防止指数循环？

Question

我正在尝试使用 jQuery 创建一个 ajax 分页。我正在让它工作，但有一个大问题：

分页由 Last->> 组成，每个按钮都有效。 pagenum 通过 ajax 发送并重新加载页面所在的 DIV，以显示与该页码相关的帖子（第 1 页 = 帖子 1-10 等）。

假设我们在总共 2 页的第 1 页。单击第 2 页、下一个或最后一个将我带到应有的第 2 页。如果我然后单击第 1 页、上一页或最后一页，我应该会被带到第 1 页，但 ajax 会启动两次。

如果我再次单击第 2 页、下一个或最后一次，我会再次进入第 2 页，但 ajax 会启动 4 次。如果我回到第 1 页，ajax 会启动 8 次。

你可以看到我要去哪里。

我包含 3 个文件的代码：

index.php里面显示的内容

<script type="text/javascript" src="fetchposts.js"></script>
<div id="contPaginated">
    <div id="content"></div>
</div>

fetchposts.js 加载 getposts.php（将我的内容与 wordpress 内容分开）

$(document).ready(function() {
     $('#content').load('getposts.php');
});

getposts.php 加载帖子和分页（这是问题发生的地方，只包含分页代码，因为这是问题所在）

<script type="text/javascript">
$(document).ready(function() {
var first = 1;
var currentPage = 1;
var numrows = <?php echo $rows; ?>;
var pagerows = <?php echo $page_rows; ?>;
var last = <?php echo $last; ?>;
var pagenum = '';
var hideLikes = <?php echo $hideLikes; ?>;
var hideDislikes = <?php echo $hideDislikes; ?>;

for (i = 1; i <= last; i++){
    $('<div id="page_' + i + '" class="pageNum"><a href="#">' + i + '</a></div>').appendTo('.pages');
}

$('.pageNum').live('click', function() {
    pagenum = $(this).attr('id').replace('page_', '');
    paginationAjax();
    return false;
});

$('.first').live('click', function() {
    pagenum = first;
    paginationAjax();
    return false;
});

$('.previous').live('click', function() {
    pagenum = Math.max(currentPage - 1, first);
    paginationAjax();
    return false;
});

$('.next').live('click', function() {
    pagenum = Math.min(currentPage + 1, last);
    paginationAjax();
    return false;
});

$('.last').live('click', function() {
    pagenum = last;
    paginationAjax();
    return false;
});

function paginationAjax(){
    // Send values to database
    $.ajax({
        url: 'getposts.php',
        //check.php receives the values sent to it and stores them in the database
        type: 'GET',
        data: 'pagenum=' + pagenum,
        success: function(callback) {
            $('#content').html('').html(callback);
        }
    });
}
});
</script>

<div class="Pagination">
<div class ="Pagination-inside-top">
    <div class="first">
        <a href=''> <<-First </a>
    </div>

    <div class="previous">  
        <a href=''> <-Previous</a>
    </div>

    <div class="pages"></div>

    <div class="next">
        <a href=''>Next -> </a>
    </div>

    <div class="last">
        <a href=''>Last ->></a>
    </div>
</div>
</div>

我想澄清一些事情：

• 我知道代码需要清理。我只想先解决这个循环问题。
• ajax 本身可以工作。它发送正确的值并很好地检索它们。
• 变量声明和设置也都很好。

同样，问题是 ajax 虽然运行良好并将我发送到正确的位置，但根据我使用分页的次数呈指数级触发：1 单击触发 ajax 一次，但 2 单击触发它两次， 3 次点击触发 4 次，4 次点击 = 8 次等等。

所以问题是：如何停止指数循环？

Answer 1

据我所知，您的live()s 是原因...

我会为 Back & Forward 分配一个唯一的 id 并在脚本的 php 部分设置当前页面（假设您传递 json 标头，然后传递 json_encode()，它将类似于 $array_of_vals_for_json['back_button']=$thispage-1; 用于先前的页面链接。

我认为我们需要看看你的 php 正在做什么才能提出任何体面的建议，但我很确定你的生活是循环的原因

Answer 2

您正在多次加载getposts.php，这会导致每次加载getposts.php 时都会绑定实时事件。

在页面加载 fetchposts.js 加载 getposts.php 并绑定实时点击事件。然后你点击一个链接，它会再次加载getposts.php 并再次绑定实时点击事件。和循环。

将你的 js 代码移动到 fetchposts.js 中，你应该会很好。