Блог старого компьютера

Блог старого компьютера


Главная Jquery Ajax - это просто (смена информации без перезагрузки страницы)

Ajax - это просто (смена информации без перезагрузки страницы)

06.05.2013 16:35 Администратор Jquery
Печать PDF

Довольно часто на сайте необходимо сделать подгрузку какой либо информации без перезагрузки страницы. Раньше это делалось на чистом js, а код занимал порядка 30 строк (я уперто почему то делал это на js и даже не стремился изучать jquery говоря себе что на jquery каждый дурак сможет, от части для меня это оказалось полезным, сейчас я могу писать используя jquery и не используя его). С появлением jquery много сложностей  с организацией подобных вопросов отпало. Сегодня я хочу вам показать как просто, быстро, и легко используя jquery можно подгружать информацию.

 Начнем с самого простого, так сказать с основы

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
$.ajax({
url: '/page.html',
success: function(data){
alert(data);
},
error: function(){
alert("Ошибка");
}
});
</script>

В примере выше скрипт обращается к файлу page.html и в случае удачного выполнения выводит с помощью функции alert его содержимое, а в случае если файл недоступен возвращает сообщение об ошибке. На практике такой код использовать практически не где, он служит только  для ознакомления с аякс запросом.

Давайте несколько доработаем код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script>
function get_content(adress){
$.ajax({
url: adress,
success: function(data){
$('#page_content').html(data);
},
error: function(){
alert("Ошибка! Страница недоступна");
}
});
}
</script>
<ul>
<li><a onclick="get_content('/page1.html')" href="#">Страница 1</a></li>
<li><a onclick="get_content('/page2.html')" href="#">Страница 2</a></li>
<li><a onclick="get_content('/page3.html')" href="#">Страница 3</a></li>
</ul>
<div id="page_content"></div>

 Вот этот скрипт уже имеет право на жизнь. Код существенно не изменился, мы поместили его в функцию для того чтоб адрес подгружаемой страницы можно было легко подставлять, а так же добавили вывод информации в блок div, с его помощью мы меняем контент без перезагрузки страницы. Этот скрипт можно взять за основу при разработке собственного сайта который строится на подгрузке информации без перезагрузки страницы. Само собой для таких нужд скрипт еще необходимо доработать.

Я привел лишь простые примеры, на самом деле возможности аякс запроса на этом  не кончаются, с помощью его можно отправлять post и get данные....

Комментарии  

 
0 #2 Administrator 18.01.2014 09:58
Цитирую Ruslan:
Этот скрипт работает только в IE.
Нужно добавить " dataType: 'html', " после " url: adress, "


Суть поста показать как просто делать Ajax. А вообще у меня код работает и в опере и в хроме и в мозиле, в ie я не проверял.
Цитировать
 
 
0 #1 Ruslan 09.01.2014 12:14
Этот скрипт работает только в IE.
Нужно добавить " dataType: 'html', " после " url: adress, "
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?