Question

我遇到了问题。

我正在使用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（对我很重要）。

我需要的解决方案可以帮助我加载模板而无需双重标记。

Answer 1

在您的模板中，请确保您有类似

的内容

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

而且id="content"是唯一的，只有那里而不是你的$ header或$ footer。

Answer 2

如果您使用JavaScript XHR（Ajax）引入的页面也包含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 文件。

技术网址如http://example.net/index.php?page=samplepage.html。但是，使用 .htaccess 可以有效地转换为http://example.net/samplepage.html：

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

Answer 3

如果您没有清除以前的内容并且新内容对现有DOM“appended”，则会发生这种情况。

以下几点可能是您的解决方案。

在每个ajax调用中，在更新容器元素之前，清除现有元素，例如。 cont.innerHTML = '';
请记住跟踪传入响应中的任何事件绑定。
在ajax调用中移动此行var cont = document.getElementById('content');。

AJAX动态页面更新

3 个答案: