Подгрузка контента на страницу сайта с помощью ajax

контента на страницу с помощью ajax
Сначала я расскажу для чего это нужно, а потом – как это реализовать

Есть такая необходимость, когда на странице нужно меню, без которого посетителю будет просто не удобно на сайте, так сказать улучшает юзабилити.

А вы не хотите чтобы оно было на сайте, из-за того что там много ссылок. Получается, что будет много ненужных внутренних ссылок на страницы, которые вы не продвигаете, но которые все же необходимы посетителю для удобства.

Вот именно такую фишку я и опишу в данной заметке.

Цель: подгрузить на страницу нужный контент (в примере будет меню), который будет виден посетителю, но не будет виден поисковому роботу.

1) Создаем файл menu.php, в который помещаем нужный контент для подгрузки. Я в него, для примера, поместил следующее

<ul>
	<li><a href="http://seodnevnik.ru/category/sozdanie-sajtov">Создание сайтов</a></li>
	<li><a href="http://seodnevnik.ru/category/prodvizhenie-sajtov">Продвижение сайтов</a></li>
	<li><a href="http://seodnevnik.ru/category/biznes-v-internete">Бизнес в интернете</a></li>
</ul>

 

Заливаем файл на хостинг.

2) Создаем файл скрипта, например menu.js. В него помещаем следующий код

$(document).ready(function(){
$.ajax({
url: "/menu.php",
cache: false,
beforeSend: function() {
$('#divContent').html('Меню загружается');
},
success: function(html){
$("#divContent").html(html);
}
});
return false;
});


В этом коде есть строчка url: «/menu.php», в нее подставляем имя и адрес вашего файла (из пункта 1) на хостинге .

Заливаем файл скрипта на хостинг.

3) В начале документа между тегами HEAD вставляем строку

<script type="text/javascript" src="/menu.js"></script>

 

В которой прописываем путь к файлу скрипта на сервере.

4) В том месте страницы вашего сайта, куда должен быть подгружен контент (из файла menu.php), вставляем следующий код

<div id="divContent"></div>

Все. Проверяем и радуемся.

Поблагодарите автора репостом:
Предыдущие статьи:

2 комментария к записи “Подгрузка контента на страницу сайта с помощью ajax”

  • jkeks

    А все может быть еще немного проще, совсем без JavaScript: AJAX без JavaScript: http://jkeks.ru/jkeks.ru/archives/3658

  • Александр

    Всё бы ничего, но при отключении JS в браузере нефига не работает. Конечно редки случаи отключения JS в браузере, но тем не менее бывают, поэтому хотелось бы пример без JS увидеть, на чистом Ajax.
    А так код работает, спасибо.

Прокомментировать

Наверх ▲