Статья

Foops 19 Июня

📘 Урок 9: Ajax-запросы в jQuery — `$.get()`, `$.post()`, `$.ajax()`, работа с JSON и динамическими данными

Оглавление

📌 Пример

📌 Заключение

Цель: научиться отправлять и получать данные с сервера без перезагрузки страницы. Изучим основные Ajax-методы jQuery и научимся работать с форматом JSON.

🔹 Что такое Ajax?

Ajax (Asynchronous JavaScript and XML) — это технология, которая позволяет веб-странице обмениваться данными с сервером в фоне, не обновляя страницу.

📦 Типичные применения:

Подгрузка комментариев или новостей,
Отправка форм без перезагрузки,
Получение JSON-данных от API,
Постраничная подгрузка контента (infinite scroll).

🔸 Основные Ajax-методы jQuery

Метод	Назначение
`$.get()`	Отправка GET-запроса
`$.post()`	Отправка POST-запроса
`$.ajax()`	Общий метод для любых запросов
`$.getJSON()`	Получение данных в формате JSON
`load()`	Загрузка HTML-фрагмента на страницу

🔸 `$.get()` — простой GET-запрос

$.get('/data.php', function(response) {
  $('#result').html(response);
});

📌 Параметры:

URL запроса (/data.php)
Функция, вызываемая при успешном ответе

📌 Пример:

<button id="loadBtn">Загрузить данные</button>
<div id="result"></div>

<script>
  $('#loadBtn').click(function() {
    $.get('/info.txt', function(data) {
      $('#result').text(data);
    });
  });
</script>

🔸 `$.post()` — отправка данных методом POST

$.post('/submit.php', { name: 'John', age: 30 }, function(response) {
  alert('Ответ: ' + response);
});

📌 Подходит для:

Форм обратной связи
Авторизации
Отправки настроек

🔸 `$.getJSON()` — получение JSON

Если сервер возвращает данные в формате JSON:

$.getJSON('/user.json', function(data) {
  $('#name').text(data.name);
  $('#email').text(data.email);
});

📌 JSON (JavaScript Object Notation) — текстовый формат для хранения структурированных данных.

🔸 `$.ajax()` — универсальный способ

$.ajax({
  url: '/api/data',
  type: 'POST',
  data: { id: 123 },
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.error('Ошибка: ' + error);
  }
});

📌 Полезен, когда нужно:

Указать метод (GET/POST/PUT/DELETE),
Отслеживать ошибки,
Отправить заголовки или авторизацию.

🔸 Загрузка HTML-фрагмента

Метод load() подгружает часть страницы:

$('#content').load('/about.html #section2');

📌 Это подгрузит только элемент с id section2 из файла about.html.

🔸 Отправка формы через Ajax

<form id="myForm">
  <input name="email">
  <button>Отправить</button>
</form>
<div id="status"></div>

<script>
  $('#myForm').submit(function(e) {
    e.preventDefault();
    let formData = $(this).serialize();

    $.post('/send.php', formData, function(response) {
      $('#status').text('Готово: ' + response);
    });
  });
</script>

📌 Метод .serialize() превращает все поля формы в строку:

email=test@example.com&name=John

🔸 Пример: Подгрузка комментариев

<div id="comments"></div>
<button id="loadMore">Загрузить ещё</button>

<script>
  let page = 1;
  $('#loadMore').click(function() {
    $.get('/comments.php?page=' + page, function(data) {
      $('#comments').append(data);
      page++;
    });
  });
</script>

🔸 Пример: Работа с JSON-ответом

Ответ от сервера:

{ "status": "ok", "message": "Сохранено успешно" }

Код:

$.getJSON('/save.php', function(data) {
  if (data.status === 'ok') {
    alert(data.message);
  }
});

❗ Обработка ошибок

Не всегда запрос успешен. Для этого есть блок error:

$.ajax({
  url: '/api',
  error: function(xhr, status, error) {
    alert('Ошибка загрузки данных');
  }
});

📋 Упражнения

Подгрузи текст из .txt-файла в блок по кнопке.
Отправь имя пользователя на сервер через форму без перезагрузки.
Получи JSON-данные от API и отобрази их.
Реализуй «Загрузить ещё» с постраничной подгрузкой.
Реализуй автообновление блока каждые 5 секунд через setInterval и Ajax.

❗ Частые ошибки

❌ Отправка формы без `e.preventDefault()`

Страница перезагрузится — Ajax не успеет выполниться.

❌ Обращение к `data.responseText` вместо `data`

✅ В success(response) переменная уже содержит данные, особенно если dataType: 'json'.

❌ Ошибка CORS

Если запрашиваешь данные с другого домена, сервер должен разрешать это (через заголовки CORS). В противном случае — ошибка безопасности.

📌 Заключение

Ajax — это сердце современных одностраничных приложений. jQuery делает Ajax-запросы максимально простыми, а обработку JSON — интуитивной.

Ты теперь умеешь:

Получать и отправлять данные на сервер,
Работать с JSON,
Подгружать HTML без перезагрузки,
Отлавливать ошибки.

Jquery

+ Читать