0

我正在使用 jquery、ajax 和 php 来实现从数据库中无限滚动图像

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

这是我的鳕鱼

索引.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>

数据.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;
?>

我真的需要帮助

4

2 回答 2

1

快速查看一下，您会发现变量设置错误：

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

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

您需要进行第二次 mysql 查询以获取所有没有 limi 的图像，然后对它们进行计数以获取数据库中的图像总数。

于 2013-07-24T09:05:26.147 回答
0

在 index.php 中，您的查询仅返回 12 行，这意味着 $actual_row_count 只会是 12。相反，我会将 $actual_row_count 设置为查询“SELECT count (*) FROM photo”的结果。

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

于 2013-07-24T09:19:21.637 回答