通过返回< div>来使用Ajax / jQuery加载更多内容 [英] Load More Content using Ajax/jQuery by returning <div>

问题描述

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

I'm working on a social site something like facebook where when you drag to the bottom of the page, new content will load. Instead, my page will have a more button instead of scrolling. Whenever a user click on the 'more' button, new content will load at the bottom.

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

My page consist of three different columns. So, what I would like to do is adding 3 new different content to those 3 columns when the 'more' button is clicked.

我想返回一个新的div主列div内的内容使用ajax和php。如下所示。

I would like to return a new div content inside the main column div using ajax and php. Something like this below.

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

下面是我的页面示例...在这里摆弄 http://jsfiddle.net/Lqetw5ck/2/

Below is an example of my page... Fiddle here 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内容。我的想法如下所示。

And how should I write my PHP code? Because I'm going to return a whole div content. The idea I had is something like this below.

<?
$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。

I want to return the $content string back to the main column 1,2 and 3 so it will display a new div under that column.

谢谢！

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

I found this How to implement jScroll? but don't know how the author wrote his PHP code. Maybe this is almost the same as my case?

推荐答案

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

I'm glad to show you a raw implementation on you question:

1。设置服务器端 data.php 来提供数据：

1. Make a server-side data.php to serve data:

<?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请求获取分页数据：

After this, you can fetch the paged data with request with url:

/data.php?page_index=1&page_size=10 ，

/data.php?page_index=2&page_size=10 ;

依此类推。

2。使用jQuery创建获取函数

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 。

3. Bind the event to trigger fetch_page.

我们想要 fetch_page 在以下案例匹配时触发：

We want the fetch_page trigger when the below case matches:

1. 页面加载时（第一个数据页）。
$ b当页面滚动到底部时，$ b
2. 。


3. 点击更多按钮。

1. when page loaded (first data page).
2. when page scrolled to bottom.
3. clicking the more button.

你可以决定第二种或第三种效果是否更好，我会告诉你实施：

You can decide whether the second or the third effect is better, and I will show you the implementation:

$(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);

});

所以你可以尝试用这种方式编码效果，这不是太难，试试看，不错好运！

So you can try to code the effect this way, it's not too difficult, have a try, good luck!

这篇关于通过返回< div>来使用Ajax / jQuery加载更多内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！