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

Автор: Роман Чернышов Опубликовано: 24 ноября 2011

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

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

Просмотр кода JS

<!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="http://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: "http://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 так и без него.

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