Загрузка только содержимого страницы

Question

Я пытался добавить сценарий AJAX / jQuery на мой сайт, чтобы при переходе по сайту загружался только основной контент, и, следовательно, навигация вверху не перезагружалась.

Это структура моего сайта:

<div id=container>

 <div id="header">

  <!-- Header + Navigation Buttons, same throughout the site. -->

 </div>

 <div id="main">

  <!-- content of each page, different on each page. -->

 </div> 

</div>

Также обратите внимание, что каждая кнопка навигации ведет к файлу index.php в отдельном подкаталоге, например, www.mysite.com/contact, www.mysite.com/comments и т. Д.

Как сделать так, чтобы заголовок # оставался на всем сайте, чтобы при нажатии на ссылку в навигационной панели навигационная панель не перезагружалась, а содержимое #main -?

В конце концов, я бы хотел добавить переходы к контенту #main, поэтому при навигации по сайту вы никогда не увидите пустую белую страницу во время загрузки страницы - вместо этого вы всегда будете видеть панель навигации и т. Д. и содержимое #main будет постепенно исчезать.

Ранее я использовал это:

<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>

Но это не сработало (обратите внимание, что я написал правильный подкаталог), и вся страница перезагрузилась бы как обычно.

Если бы вы могли мне помочь, я был бы очень признателен!

Заранее спасибо! mlazim14

Answer 1

<script type="text/javascript">
  $(document).ready(function() {
    $('#main').load('/subdirectory/ #main');
  });
</script>

Answer 2

Это должно работать.Вы уверены, что адрес правильный?Возможно, вся страница еще не была загружена.Попробуйте это, а затем 'echo' содержимое файла index.php:

$(function() {
    $('#main').load('/comments/index.php');
});

Код внутри вышеуказанной функции выполняется, когда страница готова.См. jQuery .ready () .