javascript 通过返回 <div> 使用 Ajax/jQuery 加载更多内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25678303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load More Content using Ajax/jQuery by returning <div>
提问by nodeffect
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.
我正在开发一个类似于 facebook 的社交网站，当您拖动到页面底部时，将加载新内容。相反，我的页面将有一个更多按钮而不是滚动。每当用户单击“更多”按钮时，新内容都会在底部加载。
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.
我的页面由三个不同的列组成。因此，我想做的是在单击“更多”按钮时向这 3 列添加 3 个新的不同内容。
I would like to return a new div content inside the main column div using ajax and php. Something like this below.
我想使用ajax和php在主列div内返回一个新的div内容。像下面这样的东西。
<div class='content_3'>
<div class='widget'>
Content Here
</div>
</div>
Below is an example of my page... Fiddle here http://jsfiddle.net/Lqetw5ck/2/
下面是我的页面的一个例子......在这里小提琴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>
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.
我应该如何编写我的 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>';
?>
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.
我想将 $content 字符串返回到主列 1,2 和 3，以便在该列下显示一个新的 div。
Thanks!
谢谢！
EDIT: 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?
编辑：我发现了这个如何实现 jScroll？但是不知道作者是怎么写他的PHP代码的。也许这和我的情况几乎一样？
回答by Alfred Huang
I'm glad to show you a raw implementation on you question:
我很高兴向您展示有关您问题的原始实现：
1. Make a server-side data.phpto serve data:
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);
?>
After this, you can fetch the paged data with request with url:
在此之后，您可以使用带有 url 的请求获取分页数据：
/data.php?page_index=1&page_size=10for the first page data, and
/data.php?page_index=1&page_size=10对于第一页数据，以及
/data.php?page_index=2&page_size=10for the second page data;
/data.php?page_index=2&page_size=10为第二页数据；
and so on.
等等。
2. Make the fetch function with jQuery
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. Bind the event to trigger fetch_page.
3.绑定事件触发fetch_page。
We want the fetch_pagetrigger when the below case matches:
fetch_page当以下情况匹配时，我们需要触发器：
- when page loaded (first data page).
- when page scrolled to bottom.
- clicking the
morebutton.
- 页面加载时（第一个数据页）。
- 当页面滚动到底部时。
- 单击
more按钮。
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!
所以你可以尝试这样编码效果，不会太难，试试吧，祝你好运！
回答by Manwal
Limit Offset
限制偏移
This is two things you have to understand first first time when page loaded it loaded like this:
这是您第一次在页面加载时首先要了解的两件事，它像这样加载：
SELECT * FROM customers LIMIT 10 OFFSET 0
Second time when show more button click it sends value of Limitand OFFSET
第二次显示更多按钮时单击它发送值Limit和OFFSET
SELECT * FROM customers LIMIT 10 OFFSET 10
Code should be backend like:
代码应该像后端一样：
$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));
Note:assuming that you are using GET request.
注意：假设您使用的是 GET 请求。
回答by Cybersupernova
http://jsfiddle.net/Lqetw5ck/4/
http://jsfiddle.net/Lqetw5ck/4/
HTML
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
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);
});
This might help you for creating a ui view of loading more data. You can do the php thing using Manwal's answer
这可能会帮助您创建加载更多数据的 ui 视图。你可以使用 Manwal 的回答来做 php 的事情
