通过返回，使用Ajax / jQuery加载更多内容

我正在开发类似于facebook的社交网站，当你拖到页面底部时，会加载新内容。 相反，我的页面将有一个更多按钮而不是滚动。 每当用户点击“更多”按钮时，新内容将加载到底部。

我的页面由三个不同的列组成。 所以，我想要做的是在点击“更多”按钮时为这3列添加3个新的不同内容。

我想使用ajax和php在主列div中返回一个新的div内容。 这样的事情如下。

 
 Content Here 
  

下面是我的页面示例…在这里小提琴http://jsfiddle.net/Lqetw5ck/2/

 
 
 Load data from php/mysql database (For 1st Main Div) 
 
 Load more from php/mysql database when 'more' button is click 
 
 
 
 
 Load data from php/mysql database (For 2nd Main Dev) 
 
 Load more from php/mysql database when 'more' button is click 
 
 
 
 
 Load data from php/mysql database (For 3rd Main Dev) 
 
 Load more from php/mysql database when 'more' button is click 
 
 Show More 

我应该如何编写我的PHP代码？ 因为我要返回一个完整的div内容。 我的想法如下所示。

 <? $sql_stmt = "SELECT * FROM customers"; $sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con)); $row = mysqli_fetch_assoc($sql); $content = '
 '.$row['firstname'].' 
'; ?> 

我想将$ content字符串返回到主列1,2和3，因此它将在该列下显示一个新的div。

谢谢！

编辑：我发现这个如何实现jScroll？ 但不知道作者是如何编写他的PHP代码的。 也许这与我的情况几乎相同？

Answer 1

我很高兴向您展示一个关于您问题的原始实现：

1.创建服务器端data.php来提供数据：

在此之后，您可以使用url请求获取分页数据：

/data.php?page_index=1&page_size=10表示第一页数据，和

第二页数据的/data.php?page_index=2&page_size=10 ;

等等。

2.使用jQuery创建fetch函数

 var current_page = 1; var fetch_lock = false; var fetch_page = function() { if(fetch_lock) return; fetch_lock = true; $.getJSON('/data.php', {page_index: current_page; page_size: 10}, function(data) { // render your data here. current_page += 1; if(data.length == 0) { // hide the `more` tag, show that there are no more data. // do not disable the lock in this case. } else { fetch_lock = false; } }); } 

3.绑定事件以触发fetch_page 。

当以下情况匹配时，我们需要fetch_page触发器：

1. 加载页面时（第一个数据页面）。
2. 页面滚动到底部时。
3. 单击more按钮。

您可以决定第二个或第三个效果是否更好，我将向您展示实施：

 $(function() { // the definition above. // ... // 1. on page loaded. fetch_page(); // 2. on scroll to bottom $(window).scroll(function() { if($('body').scrollTop() + $(window).height() == $('body').height()) { fetch_page(); } }); // 3. on the `more` tag clicked. $('.more').click(fetch_page); }); 

所以你可以尝试用这种方式编写效果，这不是太难，试一试，祝你好运！

Answer 2

限制偏移

这是第一次首次加载页面时必须要理解的两件事，如下所示：

 SELECT * FROM customers LIMIT 10 OFFSET 0 

第二次显示更多按钮时，它会发送Limit和OFFSET值

 SELECT * FROM customers LIMIT 10 OFFSET 10 

代码应该是后端，如：

 $Limit = $_GET['limit']; $Offset = $_GET['offset']; $sql_stmt = "SELECT * FROM customers LIMIT $Limit OFFSET $Offset"; $sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con)); 

注意：假设您正在使用GET请求。

Answer 3

http://jsfiddle.net/Lqetw5ck/4/

HTML

 
 
 Load data from php/mysql database (For 1st Main Div) 
 
 Show More 

JS

 $('#show').on('click', function() { //send a ajax request here and set html equal to data recevide by ajax html = '
' +'Load data from php/mysql database (For 1st Main Div)' +'
'; $('#main_column_1').append(html); }); 

这可能有助于您创建加载更多数据的ui视图。 你可以使用Manwal的答案做php的事情