使用PHP和Ajax检索和附加HTML


Retrieving and appending HTML using PHP and Ajax

嗨,我正试图将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>';
        ?>

只是我的评论x的转发。

我认为您在ajax回调中将"success"误键入为"sucess"。

正如Renald Lam所说,你把成功误认为成功:
更改此项:

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

至:

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

U在success函数中缺少s并尝试

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