`html()`

Question

我有一篇文章博客帖子，我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");
            }
        });
    }
});

数量变量在到达页面底部时正在更新，但博客帖子未在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>

我希望这会让事情更清楚，只需要在artclesList中一次追加10篇文章。

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

中返回的结果

有关详细信息，请查看以下内容：

http://www.w3schools.com/jquery/ajax_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}

Ajax调用为div

3 个答案:

`html()`

`append()`

`after()`