javascript - jQuery Ajax 无限滚动阅读 PHP

标签 javascript php jquery mysql ajax

我想用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/

相关文章:

javascript - IE8 显示可滚动表格的隐藏问题

php - 当写入 73 个或更多元素时 MySQL 服务器已消失

php - $_SERVER ['DOCUMENT_ROOT'] 不工作

javascript - 对象 HTMLAnchorElement] 没有方法 'attr'

javascript - 使用 anchor 而不是提交输入时的安全危险

javascript - 如何让 JavaScript 中的 CSS 正常工作

javascript - 如何在多个文件输入中动态填充文件

javascript - 以编程方式生成页面时,ActiveX 控件不访问文件系统

javascript - 8 个缩略图链接到 8 个不同的画廊,但只编程一次

PHP 脚本结果 500 Internal server error