Отправка 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: "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 так и без него.

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

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

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

Консультант Чернышов Р.В. Зайдайте вопрос на любую из тем:
Бесплатно и без регистрации!

Задать вопрос
Все вопросы
Последние вопросы
Поиск по блогу
Категории
Архив
Новое на сайте
Портфолио Все работы


www.detskiy-mir.net
www.detskydoctor.ru
www.betelit.ru
www.all-alliance.ru
www.videogonok.ru
www.carpfishing.by
www.property-greek.com
www.domcons.ru

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