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

Question

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

例如，上面的代码行是从 homepage.php 脚本中执行的。它是一个 anchor 标签，供用户选择查看特定文章的全部内容，该文章在主页中仅部分显示。单击此链接后，用户将离开主页并转到文章的特定 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>

更新:2012年11月27日 你可以尝试这样的事情，如果这有助于你更好地理解。这可能不完全是您想要的，但我希望它能帮助您了解如何继续。

<?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>