javascript - Ajax调用向div添加更多内容

Question

我有一个包含一堆文章博客文章的 div，我的 div 中博客文章的数量由一个名为数量的 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");
            }
        });
    }
});

当到达页面底部时，数量变量正在更新，但博客文章没有加载到 html 中，这是我第一次使用 ajax，不确定在更新 div 时缺少什么以添加更多文章我在代码中手动更改数量变量的设置数量，更多帖子显示，但通过我的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 等吗？