Отправка POST с помощью Ajax

Author Роман Чернышов    Category JavaScript / jQuery     Tags , , Комментариев 0 Дата 24 Ноя

В последнее время я всё чаще стал применять Ajax для отправки POST данных, будь то данные формы или просто данные о каких то изменениях на странице. Очевидно, что не я один проникся любовью к столь удобному, быстрому и практичному методу отправки данных без перезагрузки страницы. Всё чаще и больше используется для этого всеми любимая библиотека jQuery (на момент написания поста уже вышла версия 1.7.1).

Собственно хочу поделиться простым примером отправки POST запроса на сервер средствами jQuery Ajax.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax POST - rche.ru</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script language="JavaScript" 
type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link').click(function(event){ // срабатывает при клике на ссылку
var value = $(this).attr('rel'); // получаем значение аттрибута rel
$('#loader').html('<img src="/images/loader.gif" width="16" height="16" border="0" alt="loader"/>');
// добавляем в блок #loader картинку, загрузка
 
var dataString = '&type=' + value; // формируем строку запроса по типу GET
$.ajax({ // отправка данных
type: "POST", // метод
url: "//rche.ru/test.php", // URL приемника
data: dataString, // строка запроса, переменные разделены знаком &
cache: false, // отключить кеширование
success: function(html){ // в случае успеха вызываем функцию
setTimeout("$(\"#loader\").html('');",2000); // задержка на 2 секунды, для наглядности, очистка блока #loader, убираем картинку
}
})
  event.preventDefault(); // возвращает FALSE 
})
})
</script>
 
</head>
<body>
<a href="javascript://" rel="1" id="link">Отправить данные</a>
<div id="loader"></div>
</body>
</html>

При нажатии на ссылку происходит перехват события и вызов функции jQuery, в которой формируется срока запроса, все переменные указываются как при GET запросе, разделенные знаком &. Затем на экран выводится картинка(gif) загрузчика и отсылаются данные на сервер тестовому скрипту на php.

После получения ответа «ok», убираем картинку и вместо нее вставляем текст ответа.
На этом всё. Как видите всё достаточно просто. Но на всякий случай не стоит забывать про пользователей у которых отключена поддержка JavaScript, по этому весь функционал вашего сайта должен работать как с использованием Ajax так и без него.

Наглядный пример можно посмотреть тут.

Оставить комментарий

Консультации

Последние вопросы
Меню

Archive

Портфолио Все работы

с 2009 года по сегодняшний день, создано более 300 сайтов...