Javascript 基于AJAX的动态页面更新_Javascript_Php_Jquery_Html_Ajax

Javascript 基于AJAX的动态页面更新

javascript php jquery html ajax

Javascript 基于AJAX的动态页面更新,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有个问题我正在使用AJAX加载页面，它工作正常，但我无法逃脱一个bug。当我第一次加载页面时，它工作正常，但我转到另一个页面，AJAX加载我想要的页面，但它有两个标签，如和我的意思是，当我第二次加载页面时，页面会在中加载相同的页面。就像画中画一样我在模板中使用如下代码： <?php echo $header ?> My content <?php echo $footer ?> 我能做什么？因为如果我删除标签的页眉和页脚，我的页面根

我有个问题

我正在使用AJAX加载页面，它工作正常，但我无法逃脱一个bug。
当我第一次加载页面时，它工作正常，但我转到另一个页面，AJAX加载我想要的页面，但它有两个标签，如

和

我的意思是，当我第二次加载页面时，页面会在

中加载相同的页面。就像画中画一样

我在模板中使用如下代码：

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

我能做什么？因为如果我删除标签的页眉和页脚，我的页面根本就没有设计。正如你所看到的，我改变了URL（对我来说很重要）

我需要一个解决方案，它可以帮助我在不使用双重标记的情况下加载模板。

在模板中，请确保

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


我的内容

而且，

id=“content”

是唯一的，只有在那里，而不是在$header或$footer中。

如果使用JavaScript XHR（Ajax）拉入的页面也包含PHP页眉和页脚代码，那么您需要用XHR替换它们：

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

template.php

如果您没有清除以前的内容，而新内容被“

追加到现有DOM中，则可能会发生这种情况
因此，以下几点可能是您的解决方案
在每个ajax
调用中，在更新容器元素之前，清除现有元素，例如cont.innerHTML=''

请记住跟踪传入响应附带的任何事件绑定
移动此行var cont=document.getElementById（'content'）在ajax调用中

第二次单击显示时，console.log（http.responseText）显示了什么？这将告诉您问题是否存在于提供页面内容的服务器脚本上。
<div id="content">
<?php echo $header ?>
My content
<?php echo $footer ?>
</div>

<?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');

?>

<!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>

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

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

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