如何集成AJAX以避免PHP CMS的页面重定向

Question

我使用了用PHP和MySQL构建的CMS。它工作得很好，我已经完全根据自己的喜好定制了它。现在唯一要做的就是制定一种更有效的数据加载方式。当用户想要选择一篇文章时，我希望浏览器保持在相同的页面/url上，而无需重新加载或重定向。以下是CMS的演示：demo LINK

例如，上面的代码行是从homepage.php脚本中执行的。它是一个锚标签，供用户选择查看某篇文章的全部内容，该文章仅部分显示在主页中。当点击这个链接时，用户会被引导离开主页，并被带到文章的特定URL。如何在主页内加载完整的文章内容页面，并隐藏原始主页内容，以避免页面重定向问题。这是可以通过这个特定的CMS来完成的吗？如果需要，我可以从CMS提供任何PHP脚本。提前谢谢。

ARCHIVE.php脚本：

<?php foreach ( $results['articles'] as $article ) { ?>
<li>
<h2>
<span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><br><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
</h2>
<p class="summary">
<?php if ( $imagePath = $article->getImagePath( IMG_TYPE_THUMB ) ) { ?>
<a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>">
<div class="floated_child0" style="background-repeat:none; background-image:url('<?php echo $imagePath?>');"></div></a>
<?php } ?>
<?php echo htmlspecialchars( $article->summary )?>&nbsp;&nbsp;<a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>">(more)</a>
</p>
</li>
<?php } ?>

Answer 1

如果你可以使用ajax获取文章的内容，并将该内容放在文章标题下面，例如，假设你在后台有一个php函数，你可以调用它来获取给定文章id的文章内容，那么你可以发出get ajax请求来获取文章内容，并放入所需的div中

<script language="javascript">
$("#view_more").click(function(){
var dataString = "id="+article_ID;
$.ajax({
type: "GET",
url: 'http://myhost.com/articles/getArticleContent',
data: dataString,
success: function(response) {
$('div #description').html(response);
}
});
return false;
});
</script>

更新：27-11-2012如果这有助于你更好地理解，你可以尝试这样的东西。这可能不是你想要的，但我希望它能帮助你理解如何进行。

<?php foreach ( $results['articles'] as $article ) { ?>
<li>
<h2>
<span class="pubDate"><?php echo date('j F Y', $article->publicationDate)?></span><br><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
</h2>
<p class="summary" id="<?php echo $article->id?>">
<?php if ( $imagePath = $article->getImagePath( IMG_TYPE_THUMB ) ) { ?>
<a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>">
<div class="floated_child0" style="background-repeat:none; background-image:url('<?php echo $imagePath?>');"></div></a>
<?php } ?>
<?php echo htmlspecialchars( $article->summary )?>&nbsp;&nbsp;<a href="#" onclick="viewFullArticle(<?php echo $article->id?>)">(more)</a>
</p>
</li>
<?php } ?>
<script language="javascript">
function viewFullArticle(article_ID){
var dataString = "id="+article_ID;
$.ajax({
type: "GET",
url: 'http://myhost.com/articles/getArticleContent',
data: dataString,
success: function(response) {
$('p #'+article_ID).html(response); //assuming response is everything you want to display within summary paragraph
}
});
return false;
};
</script>