我在一个社交网站上工作,像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代码.也许这几乎和我的情况一样吗？
解决方法
我很高兴向您展示您的问题的原始实现：
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); ?>
/data.PHP?page_index=1\u0026amp;page_size=10为第一页数据,和
/data.PHP?page_index=2\u0026amp;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.
当以下情况符合时,我们需要fetch_page触发器：
>页面加载(第一个数据页面).
>页面滚动到底部.
>点击更多的按钮.
你可以决定第二个或第三个效果是否更好,我会告诉你实现：
$(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);
});
所以你可以尝试以这种方式编写效果,这不是太难,有尝试,祝你好运！
