Ajax в jQuery: $.ajax, $.get, $.post и отправка форм без перезагрузки

Опубликовано: 26.09.2026 · Обновлено: 26.09.2026 · Актуально для jQuery 3.7.1 и 4.0.0

В основе всех Ajax-запросов jQuery лежит один метод — $.ajax(). $.get(), $.post(), $.getJSON() и .load() — это его короткие обёртки для частых случаев, под капотом они вызывают тот же $.ajax() с готовым набором настроек. Результат любого из них — объект jqXHR: он реализует интерфейс Promise/A+, поэтому обрабатывать ответ можно через .done()/.fail()/.always() (или совместимый с ними .then()), либо через async/await, если код построен на промисах.

Короткие методы и $.ajax()

Все Ajax-функции jQuery сводятся к одному универсальному методу — $.ajax(). Остальные — сокращения для типовых случаев: меньше кода, но и меньше гибкости, часть настроек в них зашита заранее.

С версий 1.12/2.2 у $.get() и $.post() есть ещё один вариант вызова — единственный объект настроек, как в $.ajax(): $.get({ url: "/api/users/42", dataType: "json", headers: {...} }). Обратите внимание: url здесь внутри объекта. Если написать $.get(url, { dataType: "json" }), второй аргумент будет считаться данными запроса и уйдёт в строку запроса как ?dataType=json. Нужна настройка вне короткой сигнатуры (заголовки, timeout) — берите объектный вариант или сразу $.ajax().

// Три варианта одного и того же GET-запроса
$.get("/api/users/42", function (user) {
  console.log(user.name);
});

$.get({ url: "/api/users/42", dataType: "json" })
  .done(function (user) {
    console.log(user.name);
  });

$.ajax({
  url: "/api/users/42",
  method: "GET",
  dataType: "json"
}).done(function (user) {
  console.log(user.name);
});

Настройки $.ajax(), которые нужны чаще всего

$.ajax() принимает один объект настроек. Параметров у него около тридцати, но в повседневной работе почти всегда нужны только эти:

$.ajax({
  url: "/api/orders",
  method: "POST",
  data: JSON.stringify({ productId: 17, qty: 2 }),
  contentType: "application/json",
  dataType: "json",
  headers: { "X-Requested-With": "XMLHttpRequest" },
  timeout: 8000,
  xhrFields: { withCredentials: true }
})
  .done(function (order) {
    console.log("заказ создан", order.id);
  })
  .fail(function (jqXHR, textStatus) {
    console.error("не удалось создать заказ:", textStatus);
  });

Полный список опций — на странице $.ajax(). Задать значения по умолчанию сразу для всех запросов можно через $.ajaxSetup() — но осторожно, это глобальная настройка, она повлияет и на сторонние плагины.

Обработка ответа: .done/.fail/.always и .then

$.ajax() и все его обёртки возвращают объект jqXHR — надстройку над XMLHttpRequest, совместимую с интерфейсом Promises/A+. Есть два способа подписаться на результат.

Через колбэки в настройках — success, error, complete. Они по-прежнему работают в jQuery 3.7 и 4.0, никто их не убирал:

$.ajax({
  url: "/api/profile",
  success: function (data, textStatus, jqXHR) {
    console.log("получено", data);
  },
  error: function (jqXHR, textStatus, errorThrown) {
    console.error("ошибка", textStatus);
  },
  complete: function (jqXHR, textStatus) {
    console.log("запрос завершён в любом случае");
  }
});

Через методы jqXHR — .done(), .fail(), .always() — те же три случая, но можно вызывать цепочкой уже после того, как получили результат запроса, и вешать несколько обработчиков на один и тот же jqXHR:

$.ajax("/api/profile")
  .done(function (data, textStatus, jqXHR) {
    console.log("получено", data);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    console.error("ошибка:", textStatus, errorThrown);
  })
  .always(function () {
    console.log("запрос завершён в любом случае");
  });

Аргументы у .done() и .fail() расположены зеркально не случайно: .done(data, textStatus, jqXHR) — данные первыми, потому что это главное, что нужно при успехе; .fail(jqXHR, textStatus, errorThrown) — сам jqXHR первым, потому что при ошибке распарсенных данных обычно нет, а нужен доступ к статусу ответа (jqXHR.status) и телу ошибки (jqXHR.responseText или jqXHR.responseJSON, если сервер вернул JSON с описанием ошибки).

Поскольку jqXHR — thenable-объект, с ним работает и .then(), и, что удобнее в современном коде, async/await:

async function loadProfile() {
  try {
    const data = await $.ajax({ url: "/api/profile", dataType: "json" });
    console.log("получено", data);
  } catch (jqXHR) {
    // При отклонении промиса await получает jqXHR, а не объект Error
    console.error("ошибка:", jqXHR.status, jqXHR.statusText);
  }
}

jqXHR.status === 0 не значит «сервер ответил нулём» — это значит, что ответ вообще не получен: .abort(), обрыв сети, истёкший timeout или блокировка CORS ещё до ответа. Различить причины помогает textStatus ("timeout", "abort", "error") — подробности при CORS смотрите в консоли браузера, а не в аргументах колбэка.

JSON: получить и отправить

Получение и отправка JSON — разные по механике вещи, их часто путают.

Получить JSON — указать dataType: "json" в $.ajax() или использовать $.getJSON(). jQuery сам распарсит текст ответа и отдаст в колбэк готовый объект:

$.getJSON("/api/products", { category: "shoes" })
  .done(function (products) {
    console.log(products.length, "товаров");
  })
  .fail(function (jqXHR, textStatus) {
    // Частая причина parsererror здесь — пустое тело ответа
    console.error(textStatus);
  });

Отправить JSON — самостоятельно сериализовать объект и указать тип содержимого. По умолчанию $.ajax() отправляет data как application/x-www-form-urlencoded — объект { name: "Иван", age: 30 } без настроек уйдёт строкой name=%D0%98%D0%B2%D0%B0%D0%BD&age=30, а не JSON:

// НЕПРАВИЛЬНО: сервер, ожидающий JSON, получит form-urlencoded тело
$.ajax({
  url: "/api/products",
  method: "POST",
  data: { name: "Кроссовки", price: 4990 }
});

// ПРАВИЛЬНО: явная сериализация и content-type
$.ajax({
  url: "/api/products",
  method: "POST",
  data: JSON.stringify({ name: "Кроссовки", price: 4990 }),
  contentType: "application/json",
  dataType: "json" // формат ответа, а не запроса
});

Отправка формы

Базовый сценарий — отправить форму без перезагрузки страницы. Сначала — обработчик submit с preventDefault(), чтобы браузер не сделал стандартную отправку и переход:

$("#feedback-form").on("submit", function (event) {
  event.preventDefault();
  var $form = $(this);
  var $btn = $form.find("button[type=submit]");

  $btn.prop("disabled", true);

  $.ajax({
    url: $form.attr("action"),
    method: "POST",
    data: $form.serialize(), // "name=..&email=..&message=.."
    dataType: "json"
  })
    .done(function (response) {
      $form[0].reset();
    })
    .fail(function (jqXHR) {
      var errors = jqXHR.responseJSON && jqXHR.responseJSON.errors;
      showFormErrors($form, errors || { _general: "Не удалось отправить форму" });
    })
    .always(function () {
      $btn.prop("disabled", false);
    });
});

.serialize() собирает поля формы в строку вида a=1&b=2. Если нужен не строковый, а объектный результат — есть .serializeArray(), возвращающая массив { name, value } по каждому полю. Оба метода учитывают только поля с атрибутом name и пропускают отключённые и невыбранные radio/checkbox.

Блокировка кнопки на время запроса — обязательная деталь: без неё двойной клик или медленное соединение отправляют форму дважды. Снимать блокировку нужно в .always(), а не в .done(), иначе при ошибке кнопка останется заблокированной навсегда.

Ошибки валидации с сервера обычно приходят с кодом 4xx — это тоже .fail(), а не .done(). Распарсенный JSON из тела ошибки jQuery кладёт в jqXHR.responseJSON, либо доступен как текст в jqXHR.responseText.

Отправка файлов требует другого набора настроек: содержимое формы собирается не в строку, а в FormData — объект, умеющий нести бинарные данные:

$("#upload-form").on("submit", function (event) {
  event.preventDefault();
  var formData = new FormData(this); // включая поля <input type="file">

  $.ajax({
    url: "/api/upload",
    method: "POST",
    data: formData,
    processData: false, // не превращать FormData в строку
    contentType: false, // не задавать Content-Type самим — это сделает браузер
    dataType: "json"
  }).done(function (response) {
    console.log("файл загружен:", response.url);
  });
});

processData: false и contentType: false обязательны вместе: иначе jQuery подставит application/x-www-form-urlencoded вместо нужного multipart/form-data; boundary=..., и сервер не разберёт форму.

Таймауты, повтор и отмена

Опция timeout обрывает запрос, если ответ не пришёл вовремя, и вызывает .fail() с textStatus === "timeout":

$.ajax({ url: "/api/slow-report", timeout: 5000 })
  .fail(function (jqXHR, textStatus) {
    if (textStatus === "timeout") {
      console.warn("сервер не ответил за 5 секунд");
    }
  });

jqXHR также реализует метод .abort() — им можно отменить запрос вручную в любой момент до завершения:

var request = $.ajax({ url: "/api/report" });

$("#cancel-btn").on("click", function () {
  request.abort();
});

Практическая задача, где отмена нужна почти всегда, — живой поиск по мере ввода: без защиты от гонки более медленный старый ответ может прийти позже нового и затереть актуальный результат:

var currentSearch = null;

$("#search").on("input", function () {
  var query = this.value;

  if (currentSearch) {
    currentSearch.abort(); // отменяем предыдущий незавершённый запрос
  }

  currentSearch = $.ajax({
    url: "/api/search",
    data: { q: query },
    dataType: "json"
  }).done(function (results) {
    renderResults(results);
  });
});

Отменённый через .abort() запрос тоже вызовет .fail() с textStatus === "abort" — это ожидаемо, и такую ошибку в интерфейсе показывать не нужно, достаточно её игнорировать в обработчике.

CORS, cookies и CSRF

CORS (Cross-Origin Resource Sharing) настраивается не в jQuery. Разрешение или запрет запроса с другого домена определяет сервер: он должен вернуть заголовки Access-Control-Allow-Origin (и при необходимости Access-Control-Allow-Credentials, Access-Control-Allow-Headers). Без них браузер заблокирует ответ независимо от кода на jQuery — в консоли ошибка CORS, а в .fail() — статус 0 без подробностей.

На стороне jQuery настраивается только одно — отправлять ли учётные данные (cookies, заголовки авторизации) вместе с кросс-доменным запросом:

$.ajax({
  url: "https://api.example.com/orders",
  xhrFields: { withCredentials: true }
});

Ловушка: при withCredentials: true сервер обязан вернуть Access-Control-Allow-Origin с конкретным доменом, а не * — со звёздочкой браузер откажется принимать ответ. Это ограничение спецификации Fetch/CORS, а не jQuery.

CSRF-токен. Для запросов, которые меняют данные (POST/PUT/DELETE), большинство серверных фреймворков требует передавать защитный токен в заголовке. Общий принцип: токен кладут в <meta>-тег при рендере страницы, а на клиенте читают его и добавляют в заголовки всех запросов через $.ajaxSetup():

var csrfToken = $('meta[name="csrf-token"]').attr("content");

$.ajaxSetup({
  headers: { "X-CSRF-Token": csrfToken }
});

// Теперь любой $.ajax()/$.post() на странице отправит этот заголовок автоматически

Имя заголовка и meta-тега зависит от бэкенда — принцип «токен из meta в заголовок каждого запроса» общий. Если глобальный $.ajaxSetup() нежелателен (часть запросов идёт на сторонние домены), заголовок можно добавлять точечно через beforeSend у конкретного запроса.

Глобальные события Ajax

Кроме колбэков конкретного запроса, jQuery рассылает глобальные события на все Ajax-запросы страницы (отключаются опцией global: false). Подписываются на них через $(document).on("ajaxStart", …) и т. п. Одноимённые методы-шорткаты (.ajaxStart(), .ajaxStop(), .ajaxError() и др.) с jQuery 3.5 считаются устаревшими — работают, но в новом коде используйте .on():

$(document)
  .on("ajaxStart", function () {
    $("#global-loader").show();
  })
  .on("ajaxStop", function () {
    $("#global-loader").hide();
  })
  .on("ajaxError", function (event, jqXHR, settings, error) {
    console.error("Ajax-запрос упал:", settings.url, error);
  });

Полный список Ajax-методов, включая низкоуровневые $.ajaxPrefilter() и $.ajaxTransport(), — на странице все Ajax-методы. Глобальными событиями удобно закрывать сквозную логику, но не стоит злоупотреблять: несколько независимых виджетов со своим ajaxError легко превращаются в дублирующиеся уведомления об одной и той же ошибке.

Что изменилось в jQuery 4.0 для Ajax

Релиз jQuery 4.0.0 (январь 2026 года) сделал несколько неявных прежде вещей явными — по историческим причинам безопасности:

• JSON больше не превращается в JSONP автоматически. Раньше dataType: "json" с параметром обратного вызова в URL мог незаметно обернуться в JSONP-запрос. В 4.0 нужен явный dataType: "jsonp" — неявное превращение убрано как риск выполнения чужого кода без ведома разработчика. Для новых интеграций вместо JSONP лучше обычный CORS-запрос.
• Скрипты не выполняются без явного dataType: "script". 3.0 уже запрещал это для кросс-доменных запросов; 4.0 распространил ограничение и на запросы в пределах одного домена. Нужен $.getScript() или dataType: "script".
• Транспорт скриптов теперь всегда использует тег <script>, а не только для кросс-доменных запросов, как раньше. При строгом CSP стоит перепроверить, что политика разрешает нужные источники скриптов.
• Поддержка FormData и бинарных данных в data встроена в ядро (по руководству по обновлению это может изменить порядок вызова префильтров). Если код должен работать и на 3.x, продолжайте явно указывать processData: false, contentType: false — на 4.0 это не мешает.

Подробный разбор остальных изменений библиотеки, не касающихся Ajax, — в статье что изменилось в jQuery 4.0.

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

То же на fetch

Нативный fetch() решает ту же задачу иначе: он ближе к «сырому» HTTP и не угадывает формат данных за вас.

Переход на fetch оправдан там, где jQuery остаётся только ради Ajax-слоя. Подробнее о соответствиях jQuery и нативного JS — в статье jQuery и чистый JavaScript; о событии submit и отправке форм — в статьях события в jQuery: .on() и .off() и формы в jQuery.

Чек-лист

• Для типовых запросов — короткие методы ($.get, $.post, $.getJSON), для нестандартных настроек (заголовки, таймаут, отмена, JSON-тело) — сразу $.ajax().
• Обрабатывать результат через .done()/.fail()/.always() (или async/await), а не через методы jqXHR.success()/.error() — их убрали в jQuery 3.0.
• Для JSON-тела запроса — обязательно JSON.stringify() и contentType: "application/json"; один dataType: "json" отвечает только за формат ответа.
• Файлы — через FormData с processData: false, contentType: false вместе.
• Кнопку отправки формы — блокировать на время запроса, снимать блокировку в .always().
• Живой поиск и другие запросы, которые могут перекрываться, — хранить jqXHR и вызывать .abort() у предыдущего перед новым запросом.
• CORS настраивается на сервере; на клиенте — только xhrFields.withCredentials, если нужны cookies кросс-доменно.
• В jQuery 4.0 JSONP и выполнение скриптов через Ajax требуют явного dataType — неявных автопревращений больше нет.

Частые вопросы

[ наверх ]