Question

您好我在尝试将HTML附加到列表中以创建无限滚动效果，请不要回复告诉我使用插件。

我从检查员那里知道onClick（）是通过它调用的PHP脚本正确生成HTML但是生成的HTML没有附加到文档的其余部分。

这是我的代码（已导入JQuery）：

HTML：

    <body>
        <div id='container'>
            <?php include 'inc/header.php'; ?> 
            <?php include 'inc/nav.php'; ?>

            <section class="grid-wrap">
                <ul class="grid swipe-right custom-grid" id="grid">
                    <?php
                        $files = glob('img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);

                        $total = 9; //count($files);

                        for ($i = 0; $i < $total; ++$i) {
                            echo "<li><a href='" . $files[$i] . "' target='_blank'><img class='lazy' src='" . $files[$i] . "' alt= 'Image of Sheila' /><h3>View Full Image</h3></a></li>";
                        }
                    ?>
                </ul>   

              <div id='load-more'>VIEW MORE PHOTOS</div>
            </section>


            <?php include 'inc/footer.php'; ?>

        </div>

        <script>
            $('#load-more').click(function(){
                $.ajax({
                    url: 'inc/gallery/gallery2.php',
                    dataType: 'html',
                    sucess: function(php){$('.grid-wrap').append(php);}
                });
            });
        </script>
    </body>

gallery2.php：

        <?php
            $files = glob('../../img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);
            $total = 9;
            $id = 1;

            echo '<ul class="grid swipe-right custom-grid" id="grid' . $id . '">';

            for ($i = $total; $i < ($total + 9); ++$i) {
                echo "<li>
                        <a href='" . $files[$i] . "' target='_blank'>
                            <img src='" . $files[$i] . "' alt= 'Image of Sheila' />
                            <h3>View Full Image</h3>
                        </a>
                      </li>";
            }

            $total+= 9;
            echo '</ul>';
        ?>

Answer 1

重新发布我的评论：x。

我认为你错误地将“成功”称为“成功”，因为你的ajax回调是“成功”。

Answer 2

正如Renald Lam所说，你错误地将成功视为成功：
改变这个：

sucess: function(php){$('.grid-wrap').append(php);

到：

success: function(php){$('.grid-wrap').append(php);

Answer 3

你在s函数中丢失success并尝试

$('#load-more').click(function(){
    $.ajax({
        url: 'inc/gallery/gallery2.php',
        dataType : 'html',
        success: function(php){
           $('.grid-wrap ul').append(php);
        }
    });
});

使用PHP和Ajax检索和附加HTML

3 个答案: