javascript - 使用 "load more"按钮加载页面

Question

我有一个脚本，它使用页面链接编号来显示下一页和上一页，例如:

上一页 1 2 3 4 5 6 7 8 9 10 下一页

URL 更改为 www.domain.com/?page=2 。我想将其更改为附加新数据的(加载更多)按钮。到目前为止我得到了这个 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} 是使用的 smarty 变量

单击页面 (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 的程序(例如网络爬虫)，同时增强了体验，以满足拥有 JavaScript 的用户的要求。

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