由AJAX動態頁面更新

我使用AJAX加載頁面，並且它能正常工作，但我無法逃脫一個錯誤。
當我加載頁面時，第一次可以正常工作，但是當我轉到另一頁面時，AJAX加載了我想要的頁面，但它有雙重標籤，如<head>和<footer>。

我的意思是當我第二次加載頁面時，頁面會在<div>中加載相同的頁面。這就像畫中畫。

我在模板代碼中使用這樣的：

<?php echo $header ?> 
      My content 
<?php echo $footer ?>

而且每一個頁面加載相同的代碼後，我回到以前的頁面通過鏈接。

我的Ajax代碼：

function showContent(link) { 

    var cont = document.getElementById('content'); 
    var loading = document.getElementById('loading'); 
    window.history.replaceState('', 'Title', link); 
    cont.innerHTML = loading.innerHTML; 

    var http = createRequestObject();     // создаем ajax-объект 
    if(http) { 
     http.open('get', link);       // инициируем загрузку страницы 
     http.onreadystatechange = function() {   // назначаем асинхронный обработчик события 
      if(http.readyState == 4) { 

       cont.innerHTML = http.responseText;  // присваиваем содержимое 
      } 
     } 
     http.send(null);  
    } else { 
     document.location = link; // если ajax-объект не удается создать, просто перенаправляем на адрес 
    } 
} 

// создание ajax объекта 
function createRequestObject() { 
    try { return new XMLHttpRequest() } 
    catch(e) { 
     try { return new ActiveXObject('Msxml2.XMLHTTP') } 
     catch(e) { 
      try { return new ActiveXObject('Microsoft.XMLHTTP') } 
      catch(e) { return null; } 
     } 
    } 
}

我能做些什麼？因爲如果我刪除標籤頁眉和頁腳我的頁面根本沒有設計。正如你看到的，我改變了URL（對我很重要）。

我需要解決方案，它將幫助我加載模板，而不需要雙重標記。

來源

2016-06-21 Sergey Karsten

什麼'console.log（http.responseText）'在第二次點擊顯示？這會告訴你是否存在提供頁面內容的服務器腳本中的問題。 – bloodyKnuckles

在模板中，請確保您有類似

<?php echo $header ?> 
     <div id="content">My content</div> 
<?php echo $footer ?>

這id="content"是在$頁眉或頁腳$獨特的，只有在那裏，而不是。

來源

2016-06-21 12:26:37 Julqas

如果你正在使用JavaScript XHR（阿賈克斯）拉動的頁面還包含PHP頁眉和頁腳代碼，那麼你需要與你的XHR也取代那些：

<div id="content"> 
<?php echo $header ?> 
My content 
<?php echo $footer ?> 
</div>

包裝你內容div標記在頁眉和頁腳以覆蓋它們而不是重複它們。

另外，我已經實現了一個PHP模板系統的方法是這樣的：

的index.php

<?php 

// GET PAGE 
if (isset($_GET['page']) 
    && '' != $_GET['page'] 
    && !preg_match('!^(/|\.|(ht|f)tp://)!', $_GET['page']) 
) $page = $_GET['page']; 
else $page = 'home.html'; 

// EXECUTE TEMPLATE 
require('template.php'); 

?>

的template.php

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title of the document</title> 
</head> 
<body> 
<!-- plain HTML header goes here --> 

<!-- RETRIEVE PAGE --> 
<?php require('pages/' . $page); ?> 

<!-- plain HTML footer goes here --> 
</body> 
</html>

samplepage.html

<h2>Sample Page Header</h2> 
<p>Sample page content goes here.</p>

phppage.php

<h2>PHP Page Header</h2> 
<p><?php echo 'PHP page content goes here.'; ?></p>

一切順利的的index.php文件。您可以使用PHP來阻止對頁面文件的直接訪問，或者如果使用Apache Web服務器，則可以使用。htaccess將所有請求重定向到index.php文件。

技術URL看起來像http://example.net/index.php?page=samplepage.html。但是，使用的.htaccess可以有效地轉化爲http://example.net/samplepage.html有：

RewriteRule ^(.*)$ index.php?page=$1&%{QUERY_STRING} [L]

來源

2016-06-21 12:34:17 bloodyKnuckles

這可以，如果你不清除以前的內容和新的內容是被「appended」現有的DOM發生。

因此，以下幾點可能是您的解決方案。

在每個ajax調用中，在更新容器元素之前，清除存在的元素，例如。 cont.innerHTML = '';
記得跟蹤傳入響應中的任何事件綁定。
在ajax調用中移動此行var cont = document.getElementById('content');。

來源

2016-06-21 12:41:56

由AJAX動態頁面更新

回答

相關問題