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 и повешаем на него обработчик:

<div style='border: 1px solid gray; padding: 5px;' id='ajax'>Кликни по мне!</div>
<script type='text/javascript'>
  jQuery('#ajax').click(function() {
    jQuery(this).html('Спасибо за клик!');
  });
</script>

После того, как мы проверили, что обработчик работает, заменим его (выполним 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>Заголовок h1</h1>';
  break;
  case 2:
    $result = '<h2>Заголовок h2</h2>';
  break;
  case 3:
    $result = '<h3>Заголовок h3</h3>';
  break;
}
echo json_encode ($result); //Запаковываем результат