Ajax调用以向div添加更多内容

Question

我有一个div和一堆文章博客文章，我的div中的博客文章的数量是由一个名为quantity的php变量决定的。当我滚动到页面底部时，我想编写一个ajax调用，以便数量更新并加载更多的博客文章。下面是我的代码，当我点击页面底部时，它会更新文章的数量，但是文章不会出现在页面上。

var quantity = <?php echo $quantity; ?>
//Scroll to bottom of page 
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        // ajax call should go here
        $.ajax({
            type: "GET",
            url: 'index.php',
            success: function(data) {
                quantity = quantity + 10;
                alert("end");
            }
        });
    }
});

当到达页面底部时，quantity变量正在更新，但是博客文章并没有加载到html中，这是我第一次使用ajax更新div，并且不确定我在用更多的帖子更新div时，当我在代码中手动更改quantity varible的设置号时--更多的帖子会显示出来，但是当它通过ajax更新时，它会出现吗？

更新

下面是php文件

<?php 
$articleIndex = 0;
$bigImageCounter =  0;
$smallImageCounter = 0;
$quantity = 46;
$omitThis = 0;
$cat_id = $mpArticle->data['cat_id'];

$featuredArticle = $mpArticle->getFeaturedArticle( $cat_id );
if( $featuredArticle && $featuredArticle['article_status'] == 1){
    $articleIndex++;
    $quantity = 46;
    $omitThis =  $featuredArticle['article_id'];

    include_once($config['include_path'].'featured_article.php');

if(isset($has_sponsored) && $has_sponsored){ /*DO NOTHING*/ }
else{ ?>
    <!-- ShareT -->
    <div id="shareT-ad" style="margin-bottom: 0.5rem;" class="columns mobile-12 small-12 medium-12 large-12 xlarge-12 no-padding padding-bottom">
        <div data-str-native-key="6898172d" style="display: none;"></div>
        <script type="text/javascript" src="//native.sharethrough.com/assets/str-dfp.js"></script>
    </div>
    <hr class="padding-top">
    <?php }
}

$articlesList = $mpArticle->getArticlesList(['limit' => $quantity, 'omit' => $omitThis, 'withMobLogs'=> true ]);


/* Article List */
$totalArticles = count($articlesList );

foreach ($articlesList as $articles){

    $linkToArticle = $config['this_url'].$articles['cat_dir_name'].'/'.$articles["article_seo_title"];
    $linkToACategory = $config['this_url'].$articles['cat_dir_name'];
    $date = date("M d, Y", strtotime($articles['date_updated']));
    $linkToImage = 'http://cdn.puckermob.com/articlesites/puckermob/large/'.$articles['article_id'].'_tall.jpg';
    $linkToContributor = $config['this_url'].'contributors/'.$articles['contributor_seo_name'];
    $cat_name = $articles['cat_dir_name'];

    //IGNORE MOBLOG ARTICLES
    if( !isset($category_page) && $cat_name === "moblog" && $articles['article_featured_hp'] != 1) continue;

    if( $articleIndex % 7 == 0 ) { 
        $articleIndex++;
        $bigImageCounter++; 
        ?>
        <div class="columns mobile-12 small-12 medium-12 large-12 xlarge-12 no-padding" id="<?php echo 'article-'.$articleIndex;?>">
            <a class="mobile-5 small-5 medium-5 large-12 xlarge-12 " href="<?php echo $linkToArticle; ?>">
                <img src="<?php echo $linkToImage; ?>" alt='<?php echo $articles['article_title']?>'>
                <?php if(isset($_GET['show']) && $_GET['show'] == 'type'){
                        if($articles['page_list_id'] != 0) $type = 'MULTI'; else $type = 'SINGLE';
                    echo '<span style="position: absolute; top: 3.5rem; left: 5rem; font-size: 4rem;  color: #000; font-weight: bold; ">';
                    echo $type;
                    echo '</span>';
                    }?>
            </a>
            <div class="mobile-12 small-12 medium-12 large-12 xlarge-12 mobile-vertical-center padding-top">
                <p class="left uppercase" >
                    <!--<span class="span-category <?php //echo $articles['cat_dir_name']?>"><a href="<?php //echo $linkToACategory; ?>" ><?php //echo $articles['cat_name']?></a></span>-->
                    <span class="span-date"><?php echo $date; ?></span>
                </p>
                <p class="right uppercase">
                    <span class="span-author">By <a href="<?php echo $linkToContributor; ?>" ><?php echo $articles['contributor_name']; ?></a></span>
                </p>
                <a class="left clear-left" href="<?php echo $linkToArticle; ?>">
                    <h1 class="h1-large-article"><?php echo $articles['article_title']?></h1>
                </a>
            </div>
        </div>
        <?php if( $articleIndex < $totalArticles )?> <hr class="padding-top">

        <?php if($bigImageCounter == 1){?>
        <?php }?>

        <?php  } else{

            $clearLeft='no-padding-right'; 
            if( $smallImageCounter == 0 || $smallImageCounter % 2 == 0) $clearLeft = 'clear-left no-padding-left';
            $smallImageCounter++;
            $articleIndex++; 
        ?>
            <div class="articles columns mobile-12 small-12 medium-6 large-6 xlarge-6 <?php echo $clearLeft; ?> ggnoads" id="<?php echo 'article-'.$articleIndex;?>">
                <a class="mobile-5 small-5 medium-12 large-12 xlarge-12 " href="<?php echo $linkToArticle; ?>">
                    <img src="<?php echo $linkToImage; ?>" alt='<?php echo $articles['article_title']?>'>
                    <?php if(isset($_GET['show']) && $_GET['show'] == 'type'){
                        if($articles['page_list_id'] != 0) $type = 'MULTI'; else $type = 'SINGLE';
                    echo '<span style="position: absolute; top: 3.5rem; left: 5rem; font-size: 4rem;  color: #000; font-weight: bold; ">';
                    echo $type;
                    echo '</span>';
                    }?>
                </a>
                <div class="mobile-12 small-12 medium-12 large-12 xlarge-12 mobile-vertical-center padding-top">
                    <p class="uppercase small-7 left small-font">
                        <!--<span class="span-category <?php //echo $articles['cat_dir_name']?>"><a href="<?php //echo $linkToACategory; ?>" ><?php // echo $articles['cat_name']?></a></span>-->
                        <span class="span-date"><?php echo $date; ?></span>
                    </p>
                    <p class="right uppercase small-5 align-right small-font">
                        <span class="span-author">By <a href="<?php echo $linkToContributor; ?>" ><?php echo $articles['contributor_name']; ?></a></span>
                    </p>
                    <a class="left clear-left" href="<?php echo $linkToArticle; ?>">
                        <h1 class="h1-small-article"><?php echo $articles['article_title']?></h1>
                    </a>
                </div>
            </div>
            <?php 
            if( $smallImageCounter % 2 == 0  && $articleIndex < $totalArticles) echo '<hr class="padding-top">';
        } ?> 
    </div>

    <?php } ?>
    <style>
    .str-adunit.hosted-video.str-collapsed, .str-adunit.clickout.str-collapsed{border:none !important;}
    </style>

我更新的ajax调用现在又追加了articlesList，因为这就是我所调用的，但不太确定如何加载articlesList中之前的文章，一次只加载10篇文章，对不起，我对php和ajax非常陌生，并试图在这个代码库中工作。

<script>

var articles = <?php echo $articlesList; ?>
//Scroll to bottom of page 
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        // ajax call should go here
        $.ajax({
            type: "GET",
            url: 'index.php',
            data: articles,
            success: function(data) {
                $("#puc-articles").append(articles);
            }
        });
    }
});
</script>

我希望这能让事情变得更清楚，只需要一次追加10篇还没有出现在artclesList中的文章。

Answer 1

您需要将ajax调用返回的博客文章附加到div。

$("#divID").append(data);

但是，这也取决于ajax如何返回额外的博客文章。它们在一个数组里吗？只是一堆html之类的吗？

Answer 2

用这个：

$("#yourDivId").html(data);

您的代码如下所示：

var quantity = <?php echo $quantity; ?>
//Scroll to bottom of page 
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        // ajax call should go here
        $.ajax({
            type: "GET",
            url: 'index.php',
            success: function(data) {
                quantity = quantity + 10;
                $("#yourDivId").html(data);
            }
        });
    }
});

data是您在index.php中返回的结果

要了解更多细节，请查看以下内容：

ajax.asp

Answer 3

您有三种使用jQuery将Ajax调用的结果附加到页面的基本方法：

html()

使用$('#myId').html(data)可以修改<div id="myID">标记的内容，因此data位于<div id="myID">和</div>之间。

所以，如果您的代码是

<div id="myID">Hello World</div>

在使用html()之后将是这样

<div id="myID">{data}</div>

append()

$('#myId').append(data)将data作为<div id="myID">和</div>中的最后一个元素。因此，在追加之后，您的#myId是这样的：

<div id="myID">Hello World{data}</div>

after()

$('#myId').after(data)的行为与append()几乎相同，但有一个不同之处，即data放在#myId之外

<div id="myID">Hello World</div>{data}