Обновление динамической страницы от AJAX

У меня проблема.Обновление динамической страницы от AJAX

Я использую AJAX для загрузки страниц, и он работает правильно, но я не могу избежать ошибки.
Когда я загружаю страницу, первый раз она работает правильно, но затем я перехожу на другую страницу, AJAX загружает страницу, которую я хочу, но у нее есть двойные теги, такие как <head> и <footer>.

Я имею в виду, когда я загружаю страницу во второй раз, страница загружает одну и ту же страницу в <div>. Это как на картинке.

Я использую шаблоны кода, как это:

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

И каждая страница загрузки и тот же код, после того, как я вернусь на предыдущую страницу по ссылке.

Мой Аякса код:

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; } 
     } 
    } 
}

Что я могу сделать? Потому что, если я удаляю теги header и footer, у моей страницы вообще нет дизайна. И как видите, я меняю 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 (Ajax) также содержат PHP верхний и нижний колонтитул код, то вам нужно, чтобы заменить те также с XHR:

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

Оберните content 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 вы можете использовать .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 = '';
Не забывайте отслеживать любые привязки событий, которые поступают с входящим ответом.
Переместить эту строку var cont = document.getElementById('content'); внутри вызова ajax.

источник

2016-06-21 12:41:56

Обновление динамической страницы от AJAX

ответ

Смежные вопросы