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

Для начала создадим ссылку и контейнер куда у нас все будет загружаться.

<a href="#" id="getContent">Загрузить контент</a>
<div id="divContent"></div>

Ссылкее и контейнеру необходимо присвоить id, в данном случае ссылка имеет id="getContent", а контейнер id="divContent".

Ниже, пишем следующий скрипт.

$(document).ready(function(){
$('#getContent').click(function(){
$.ajax({
url: "/content.php",
cache: false,
beforeSend: function() {
$('#divContent').html('Получаем контент');
},
success: function(html){
$("#divContent").html(html);
}
});
return false;
});
});

Теперь разберем наш код, при нажатии на ссылку происходит ajax-запрос, к файлу content.php. Мы также указываем, что кэширование файла запрещено. До отправки (событие beforeSend), в контейнере появляется надпись - "Получаем контент", когда запрос завершен (события success) в контейнер помещается содержимое файла content.php.

return false; мы указываем для того, чтобы при клике мы не переходили по ссылке, в данном случае по # (чтобы не было прыжка страницы).

Вот так просто получить контент с помощью jQuery.

(Visited 12 641 times, 9 visits today)