由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动态页面更新

回答

相关问题