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

Question

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

分页由<<-第一页<-上一页第一页第二页下一页->最后一页->>组成，每个按钮都有效。 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()据我所知，这就是原因...

我会为后退和前进分配一个唯一的 id，并在脚本的 php 部分设置当前页面(假设您传递 json header ，然后传递 json_encode()，则上一个页面链接将类似于 $array_of_vals_for_json['back_button']=$thispage-1; )。

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