[英]Load More Content using Ajax/jQuery by returning <div>
I'm working on a social site something like facebook where when you drag to the bottom of the page, new content will load. 我正在开发一个像facebook这样的社交网站,当你拖到页面底部时,会加载新内容。 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.
每当用户点击“更多”按钮时,新内容将加载到底部。
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. 我想使用ajax和php在主列div中返回一个新的div内容。 Something like this below.
这样的事情如下。
<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? 我应该如何编写我的PHP代码? Because I'm going to return a whole div content.
因为我要返回一个完整的div内容。 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>';
?>
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? 编辑:我发现这个如何实现jScroll? but don't know how the author wrote his PHP code.
但不知道作者是如何编写他的PHP代码的。 Maybe this is almost the same as my case?
也许这与我的情况几乎相同?
I'm glad to show you a raw implementation on you question: 我很高兴向您展示一个关于您问题的原始实现:
1. Make a server-side data.php
to 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=10
for the first page data, and /data.php?page_index=1&page_size=10
表示第一页数据,和
/data.php?page_index=2&page_size=10
for 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_page
trigger when the below case matches: 当以下情况匹配时,我们需要
fetch_page
触发器:
more
button. 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! 所以你可以尝试用这种方式编写效果,这不是太难,试一试,祝你好运!
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 Limit
and 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请求。
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. 这可能有助于您创建加载更多数据的ui视图。 You can do the php thing using Manwal's answer
你可以使用Manwal的答案做php的事情
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.