0
我有一大堆文章博客帖子的div，我的div中的博客帖子數由一個名爲quantity的php變量決定。我想寫一個ajax調用，當我滾動到頁面的底部時，數量會更新並加載更多博客文章。下面是我到目前爲止的代碼，當我打頁面的底部，但該職位沒有出現在頁面到達頁面底部時Ajax調用來爲div添加更多內容
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的更多帖子，當我在代碼中手動更改數量varible的設置數時更多的帖子顯示，但不是當它通過我的ajax更新？
UPDATE
這裏是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篇文章。
什麼裏面的數據對象在成功函數中？你是否返回你的博客文章內容？ – Keammoort
我更新了這個問題，我希望它更清楚我想要做什麼 – Palermo