如何整合AJAX以避免PHP CMS的頁面重定向

Question

我已經使用了使用PHP和MySQL構建的CMS。它工作的很好，我完全按照自己的喜好定製了它。現在唯一要做的是提高數據加載的效率。當用戶想要選擇文章時，我希望瀏覽器保持相同的確切頁面/網址，而無需重新加載或重定向。下面是CMS的演示：DEMO LINK

例如，上面的代碼行來自homepage.php腳本。這是用戶選擇查看特定文章的全部內容的定位標記，該文章僅部分顯示在主頁中。點擊此鏈接後，用戶將被導向遠離主頁並轉到文章的特定網址。我如何才能將整篇文章內容頁面加載到主頁內部並隱藏原始主頁內容以避免頁面重定向問題。這可以用這個特定的CMS來完成嗎？如果需要，我可以從CMS提供任何PHP腳本。提前致謝。

ARCHIVE.php SCRIPT：

<?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函數您可以調用後端來獲取文章內容，然後您可以發出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>