使用“加载更多”按钮加载页面

Question

我有一个脚本，它使用页面链接号显示下一页和前几页，如下所示：

prev 1 2 3 4 5 6 7 8 9

网址改为www.domain.com/?page=2。我想将它更改为一个附加新数据的(load more)按钮。到目前为止，我得到了这个javascript：

        <script type="text/javascript">
$(document).ready(function() {


var new_btn = $('<div id="gig-more" class="gig-load-more" style="display: block;">   <button id="btn-white"  type="button" class="btn-standard-lrg btn-white"">Load More</button></div>');
  new_btn.insertAfter('#frame{$currentpage+1}');

  $('#btn-white').click(function() {


$.get('?page={$thenextpage}  ', function(html){ 
  $(html).find("#testframe").appendTo("div#testframe");
});
});
});
 </script>

{$currentpage}和{$thenextpage}是使用的智能变量

点击页面中的按钮(1)它正确地加载页面(2)。但是，如果该按钮被反复单击，它将一次又一次地加载第二页。

我怎样才能做到这一点？

Answer 1

我觉得你太复杂了。你不需要这么聪明。这就是整件事：

<script type="text/javascript">
// Store what page to load next
nextpage = 2;

$('#load_more').click(function(event) {
  // Retains compatibility for those with no javascript
  event.preventDefault();

  // Fetch the data
  $.get('/ajax.php?page=' + nextpage, function(html){

    // Put the data where it belongs. I like it more this way
    $("div#testframe").append(html);

    // Keep the counter up-to-date
    nextpage++;
    });

  });
</script>

然而，您需要更多的更改。您需要在html中添加这个按钮：

<a href = "?page=2" id = "load_more">Load more</a>

请注意，这使它向后兼容那些没有javascript，如web爬虫，而它增强了经验，以满足您的要求谁拥有它。

并创建一个与当前的ajax.php类似的index.php，但它只加载所需的数据，因为您不想让用户不得不加载一堆永远不会使用的东西。