通過返回<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。

謝謝！

編輯：我發現這個如何實現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的事情