Как отправить запрос не используя форму?

Отправка HTTP запросов без HTML формы

В современном веб-разработке отправляют запросы на сервер программно через JavaScript, минуя HTML формы. Это дает больший контроль и позволяет создавать асинхронные приложения.

Fetch API (Современный стандарт)

Самый популярный способ в современном JavaScript:

// GET запрос
const response = await fetch('https://api.example.com/users');
const data = await response.json();
console.log(data);

// POST запрос с JSON
const user = { name: 'John', email: 'john@example.com' };
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(user)
});
const result = await response.json();
console.log(result);

// PUT запрос (обновление)
const updateData = { name: 'Jane' };
const response = await fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(updateData)
});

// DELETE запрос
const response = await fetch('https://api.example.com/users/1', {
  method: 'DELETE'
});

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

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Ошибка запроса:', error);
    throw error;
  }
}

Отправка файлов (FormData)

Для отправки файлов используй FormData:

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', 'My file');

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData  // Не указывай Content-Type, браузер установит автоматически
});
const result = await response.json();

Передача дополнительных заголовков

const response = await fetch('/api/protected', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'X-Custom-Header': 'value',
    'Content-Type': 'application/json'
  }
});

Отмена запроса (AbortController)

const abortController = new AbortController();

const response = await fetch('/api/data', {
  signal: abortController.signal
});

// Отмени запрос в любой момент
abortController.abort();

// В обработчике ошибок
try {
  const response = await fetch('/api/data', {
    signal: abortController.signal
  });
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Запрос был отменен');
  }
}

XMLHttpRequest (Устаревший API)

Ещё работает, но fetch предпочтительнее:

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = () => {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.onerror = () => {
  console.error('Ошибка запроса');
};

xhr.send(JSON.stringify({ name: 'John' }));

axios (Популярная библиотека)

Этот пакет часто используется в React приложениях:

import axios from 'axios';

// GET
const { data } = await axios.get('/api/users');

// POST
const response = await axios.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
});

// Все методы
await axios.put('/api/users/1', { name: 'Jane' });
await axios.delete('/api/users/1');
await axios.patch('/api/users/1', { role: 'admin' });

// Конфигурация по умолчанию
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

// Перехватчики (interceptors)
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // Обработать 401 Unauthorized
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Параметры запроса (Query параметры)

// Fetch с параметрами
const params = new URLSearchParams();
params.append('page', '1');
params.append('limit', '10');
params.append('sort', 'name');

const response = await fetch(`/api/users?${params}`);
const data = await response.json();

// Или вручную
const query = 'page=1&limit=10&sort=name';
const response = await fetch(`/api/users?${query}`);

// axios автоматически кодирует параметры
const { data } = await axios.get('/api/users', {
  params: { page: 1, limit: 10, sort: 'name' }
});

Пример: Реактивный поиск

class SearchAPI {
  constructor(baseURL) {
    this.baseURL = baseURL;
    this.abortController = null;
  }

  async search(query) {
    // Отмени предыдущий запрос
    if (this.abortController) {
      this.abortController.abort();
    }

    this.abortController = new AbortController();

    try {
      const response = await fetch(
        `${this.baseURL}/search?q=${encodeURIComponent(query)}`,
        { signal: this.abortController.signal }
      );

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      return await response.json();
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Search error:', error);
      }
      throw error;
    }
  }
}

const api = new SearchAPI('https://api.example.com');
const results = await api.search('javascript');

Основные отличия

• Fetch - встроенный, современный API, хороший для простых случаев
• XMLHttpRequest - устаревший, избегай использования
• axios - более удобен с конфигурацией и перехватчиками, требует установки
• Библиотеки: React Query, SWR, TanStack Query - для продвинутого кэширования

Для большинства случаев используй Fetch API с async/await.