Question

我正在使用jquery，ajax和php来实现无限滚动来自数据库的图像

当代码到达页面末尾时，代码只运行一次，并在数据库中存在实际内容时向我显示“没有更多内容”消息

这是我的鳕鱼

index.php

<html >
<?php include($_SERVER["DOCUMENT_ROOT"].'/db.php'); 

$query = "SELECT * FROM photo ORDER by PhotoNo DESC limit 12";

$result = mysql_query($query) or die('Query failed: ' . mysql_error());

$actual_row_count =mysql_num_rows($result);
 ?>
<head>
   <title>Infinite Scroll</title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
        var page = 1;


        $(window).scroll(function () {
            $('#more').hide();
            $('#no-more').hide();

            if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                $('#more').css("top","400");
                $('#more').show();
            }
            if($(window).scrollTop() + $(window).height() == $(document).height()) {

                $('#more').hide();
                $('#no-more').hide();

                page++;

                var data = {
                    page_num: page
                };

                var actual_count = "<?php echo $actual_row_count; ?>";

                if((page-1)* 12 > actual_count){
                    $('#no-more').css("top","400");
                    $('#no-more').show();
                }else{
                    $.ajax({
                        type: "POST",
                        url: "data.php",
                        data:data,
                        success: function(res) {
                            $("#result").append(res);
                            console.log(res);
                        }
                    });
                }

            }


        });

    </script>


</head>
<body>
  <div id='more' >Loading More Content</div>
    <div id='no-more' >No More Content</div>
    <div id='result'>
        <?php
        while ($row = mysql_fetch_array($result)) {
        $rest_logo=$row['PhotoName'];
        $image="../images/rest/".$rest_logo;
            echo '<div><img src='.$image.' /></div>';
        }
        ?>
        </div>







</body>
</html>

data.php

<?php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";


include($_SERVER["DOCUMENT_ROOT"].'/db.php'); 

$result = mysql_query("SELECT * FROM photo ORDER by PhotoNo DESC limit $set_limit");



$html = '';

while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
$html .= '<div><img src='.$image.' /></div>';
}


echo $html;
exit;
?>

我真的需要帮助

Answer 1

您可以快速查看错误设置错误：

var actual_count = "<?php echo $actual_row_count; ?>";

您正在使用mysql_num_rows（）来计算第一组结果的回报。但这仅限于12个。

你需要做第二次mysql查询来获取没有limi的所有图像，然后计算它们以获得数据库中的图像总数。

Answer 2

在index.php中，你的查询只返回12行，这意味着$ actual_row_count只会是12.而是我将$ actual_row_count设置为查询结果“SELECT count （*）FROM photo“。

我个人对这类事情的偏好是返回一个JSON响应，它只包含正在加载的n个响应，并且在javascript中存储了模板html。您编写它的方式将返回上一个查询的所有照片，而不是您想要的最后一个12。

无限滚动jquery ajax

2 个答案: