通过返回 <div> 使用 Ajax/jQuery 加载更多内容

Question

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

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

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

<div class='content_3'>
  <div class='widget'>
    Content Here
  </div>
</div>

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

<div id='main_column_1'>
    <div id='content_1'>
        Load data from php/mysql database (For 1st Main Div)
    </div>
    <div id='content_2'>
        Load more from php/mysql database when 'more' button is click
    </div>
</div>
<br>
<div id='main_column_2'>
    <div id='content_1'>
        Load data from php/mysql database (For 2nd Main Dev)
    </div>
    <div id='content_2'>
        Load more from php/mysql database when 'more' button is click
    </div>
</div>
<br>
<div id='main_column_3'>
    <div id='content_1'>
        Load data from php/mysql database (For 3rd Main Dev)
    </div>
    <div id='content_2'>
        Load more from php/mysql database when 'more' button is click
    </div>
</div>
    <button>Show More</button>

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

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

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

谢谢！

编辑：我找到了这个How to implement jScroll?，但不知道作者是如何编写他的 PHP 代码的。也许这和我的情况差不多？

Answer 1

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

1.制作服务器端data.php 来提供数据：

<?php // data.php
    $page_index = intval($_GET['page_index']); 
    $page_size = intval($_GET['page_size']);
    $skip = ($page_index-1) * $page_size;
    $data = my_query("
        select * from my_table
        limit $skip, $page_size;
    "); // the my_query function executes the sql query and return the dataset.
    echo json_encode($data);
?>

在此之后，您可以使用带有 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

<div id='main_column_1'>
    <div id='content_1'>
        Load data from php/mysql database (For 1st Main Div)
    </div>
</div>
    <button id="show">Show More</button>

JS

$('#show').on('click', function() {
    //send a ajax request here and set html equal to data recevide by ajax

    html = '<div>'
            +'Load data from php/mysql database (For 1st Main Div)'
        +'</div>';
    $('#main_column_1').append(html);
});

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