AJAX-запрос на jQuery

AJAX-запрос на jQuery

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); //Запаковываем результат
Демо Скачать