AJAX-запрос на jQuery
Домены

Система авторегистрации в каталогах, статьи про раскрутку сайтов, web дизайн, flash, photoshop, хостинг, рассылки; форум, баннерная сеть, каталог сайтов, услуги продвижения и рекламы сайтов




Счетчик PR-CY.Rank

Ajax запрос JSON-данных

Часто случается так, что нам необходимо подгрузить на страницу какую-либо информацию. Но каждый раз для этого перегружать страницу и заставлять ждать пользователя - это не дело. Для этого была придумана технология Ajax запросов. Мы с вами рассмотрим пример аякс-запроса с использованием библиотеки jQuery.

Для начала создадим страничку с подключенной библиотеко jQuery и элементом, который будет реагировать на нажатие мыши. В блок head добавим подключение jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Теперь добавим в body блок div и повешаем на него обработчик:

Кликни по мне!

После того, как мы проверили, что обработчик работает, заменим его (выполним ajax запрос к странице json.php):

jQuery('#ajax').click(function() {
	jQuery.ajax({
		'url': 'json.php', 				//Страница, с которой мы запрашиваем данные
		'data': {'number': 3}, 			//Данные, которые передаем странице
		'beforeSend': function() { },   //Что сделать до отправки запроса
		'success': function(result) {	//Что сделать после получения ответа
			jQuery('#ajax').html(result);
		}, 
		'dataType':'json',				//Тип запроса
		'type': 'get'					//Способ передачи данных
	});
});

Создадим страницу json.php, которая в зависимости от переданного параметра будет возвращать те, либо иные данные. Никаких тегов в коде страницы не надо, только блок php со следующим содержанием:

$result = 'Пусто!'; 		//Значение результата по умолчанию
switch ($_GET['number']) { 	//В зависимоти от переданной переменной возвращаем результат
	case 1:
		$result = '

Заголовок h1

'; break; case 2: $result = '

Заголовок h2

'; break; case 3: $result = '

Заголовок h3

'; break; } echo json_encode ($result); //Запаковываем результат
Демо Скачать

Крутов Герман При использовании цитат и материалов данной статьи ссылка вида "AJAX-запрос на jQuery" обязательна.

Код ссылки: <a href="http://intop24.ru/article_19.php" target="_blank">AJAX-запрос на jQuery</a>
Крутов Герман © 2009-2017 8-953-760-10-55 8-913-926-43-55 krutovgerman2007@ya.ru Я ВКонтате R197475897281 Z175174465974 41001198936523