我想用AJAX实现无限滚动。
这是我当前的 jQuery 代码:
$(document).on("pagebeforeshow", "#page-main", function(){
get_simple_info();
});
function get_simple_info(){
var info = "";
$.getJSON('classes/load.php', function(data){
$.each(data, function(index, item)
{
info += "<li id='" + item.id + "'><p>" + item.name + "</p></li>";
});
$("#listview_A").append(info);
$("#listview_A").trigger("change");
$("#listview_A").listview("refresh");
});
}
而且功能也很简单。
$query = $db->prepare("SELECT * FROM people ORDER BY ID DESC LIMIT 15");
$query->execute();
$query->bind_result($id, $name);
$query->store_result();
$rows = array();
while($query->fetch()){
$rows[] = array("id" => $id, "name" => $name);
}
$query->close();
$db->close();
return json_encode($rows);
我正在尝试通过本教程来指导自己:http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html ,但是正如你所看到的,它没有ajax.request,这一切都是用PHP完成的。
我当前的listview_A代码如下:
<ul data-role="listview" id="listview_A" data-inset="true" data-mini="true">
<li style="height: -2px; background-color: #666666"></li>
</ul>
使用 jQuery,我确实将更多项目附加到 <ul> tag
比那里的(默认情况下)更远。
说到这里,我真的不知道从哪里开始使该教程适应我的代码,你们能给我一些启发吗?
谢谢。
编辑:已解决。请参阅下面的答案。
最佳答案
在向服务器发送任何数据之前,请检查页面是否已加载。例如
if(alreadyloading == false){
alreadyloading = true;
SEND THE DATA TO SERVER
ACCEPT JSON RESPONSE
APPEND TO YOUR HTML
INCREMENT YOUR PAGE NUMBER
make alreadyloading = false;
}
现在,在将数据发送到您的服务器页面时,添加此 page-number
有了它,查询就会像
首先计算 LIMIT 值
假设您愿意在滚动中显示五个结果,
$page_size = 5
$offset = ($page_num - 1)*$page_size;
所以对于page_num = 1
,您的偏移量将是 0
因此,
SELECT * FROM table_name LIMIT 0,5
对于page_num = 2
,
$offset = 5
SELECT * FROM 表名 LIMIT 5,10
等等
关于javascript - jQuery Ajax 无限滚动阅读 PHP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20608232/