AJAX动态页面更新

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

如果您不清除以前的内容，而新内容被“ appended ”到现有DOM，则会发生这种情况。

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

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

AJAX动态页面更新

问题描述

3 个解决方案

解决方案1
0 2016-06-21 12:26:37

解决方案2
0 2016-06-21 12:34:17

解决方案3
0 2016-06-21 12:41:56

AJAX动态页面更新

问题描述

3 个解决方案

解决方案1 0 2016-06-21 12:26:37

解决方案2 0 2016-06-21 12:34:17

解决方案3 0 2016-06-21 12:41:56

解决方案1
0 2016-06-21 12:26:37

解决方案2
0 2016-06-21 12:34:17

解决方案3
0 2016-06-21 12:41:56