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

Question

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