Короткие запросы: $.get, $.getJSON, $.post

Для частых случаев у $.ajax() есть короткие формы: получить данные, получить JSON, отправить данные. Они принимают адрес, данные и функцию для ответа и возвращают тот же объект запроса с методами done(), fail() и always(). Код этого урока работает с сервером из прошлого урока, поэтому показан без запуска.

$.getJSON: загрузить JSON

// script.js
$(function () {
  $.getJSON('/api/tasks', function (tasks) {
    for (const task of tasks) {
      $('#tasks').append($('<li>').text(task.title));
    }
  });
});

Это то же самое, что $.ajax() с dataType: 'json' из прошлого урока, но в одну строку. Откройте страницу — список задач загрузится с сервера.

$.get: параметры в адресе

$.get() делает GET-запрос. Объект вторым аргументом превращается в параметры адреса:

// script.js
$.get('/api/tasks', { done: false, limit: 10 }, function (tasks) {
  console.log('Невыполненных задач:', tasks.length);
}, 'json');

jQuery отправит запрос на /api/tasks?done=false&limit=10. Последний аргумент 'json' задаёт тип ответа. Если сервер отвечает с заголовком Content-Type: application/json, jQuery и так разберёт ответ, и аргумент можно опустить.

$.post: отправить данные

$.post() делает POST-запрос, а данные отправляет как поля формы:

// script.js
$.post('/api/tasks', { title: 'Написать отчёт' })
  .done(function (task) {
    $('#tasks').append($('<li>').text(task.title));
  })
  .fail(function () {
    alert('Не удалось сохранить задачу');
  });

Сервер получает поле title, создаёт задачу и возвращает её. Если сервер ждёт именно JSON, используйте $.ajax() с contentType, как в прошлом уроке.

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

Пример курса: форма регистрации уходит на сервер без перезагрузки. Разметка в index.html:

<form id="signup">
  <input name="name" placeholder="Имя">
  <input name="email" placeholder="Почта">
  <button>Зарегистрироваться</button>
</form>
<p id="result"></p>

Код в script.js:

// script.js
$('#signup').on('submit', function (event) {
  event.preventDefault();
 
  const $button = $(this).find('button').prop('disabled', true);
 
  $.post('/api/signup', $(this).serialize())
    .done(function () {
      $('#result').text('Готово, проверьте почту');
    })
    .fail(function () {
      $('#result').text('Ошибка, попробуйте ещё раз');
    })
    .always(function () {
      $button.prop('disabled', false);
    });
});

serialize() собирает поля формы в строку, а кнопка выключается на время запроса, чтобы форму не отправили дважды.

load: вставить HTML с сервера

Метод load() загружает HTML-фрагмент и сразу вставляет его в элемент:

// script.js
$('#help').load('/help.html');

Сводка

То же на обычном JavaScript

// script.js
const response = await fetch('/api/tasks');
const tasks = await response.json();

Частая ошибка

Ждать, что $.post() отправит JSON. Объект в data уходит как title=... — поля формы, и сервер, который читает тело как JSON, получит пустые данные. Либо настройте сервер на поля формы, либо отправляйте через $.ajax() с contentType: 'application/json' и JSON.stringify().