Где передаются Query параметры?

Где передаются Query параметры в HTTP запросе

Query параметры (параметры запроса) передаются в URL строке, после символа ?. Это часть URL, которая добавляется после пути и содержит дополнительные данные для сервера.

Структура URL с Query параметрами

https://api.example.com/users/search?name=John&age=30&sort=name
      |
      |-- schema
            |
            |-- domain/host
                   |
                   |-- path
                       |
                       |-- query parameters (после ?)
                           |
                           |-- name=John (ключ=значение)
                           |-- age=30
                           |-- sort=name

В какой части HTTP запроса передаются

GET /api/users?name=John&age=30 HTTP/1.1
Host: api.example.com
User-Agent: Mozilla/5.0
Accept: application/json

[body пусто для GET запроса]


ВСЕ ПАРАМЕТРЫ ВИДНЫ В URL!

Query параметры находятся:

• В URL строке браузера
• В Request Line HTTP запроса
• В незашифрованном виде (видны в логах, истории, адресной строке)

Как работают Query параметры в JavaScript

// Получить текущие query параметры
const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('name')); // "John"
console.log(urlParams.get('age'));  // "30"

// Получить все параметры
const params = Object.fromEntries(new URLSearchParams(window.location.search));
console.log(params);
// { name: 'John', age: '30', sort: 'name' }

// Перебрать все параметры
for (let [key, value] of urlParams) {
  console.log(`${key}: ${value}`);
}

Как отправить запрос с Query параметрами

// 1. Способ: формирование URL вручную
const url = `https://api.example.com/users/search?name=John&age=30&sort=name`;
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

// 2. Способ: использование URLSearchParams (более безопасно)
const params = new URLSearchParams({
  name: 'John',
  age: 30,
  sort: 'name'
});

const url = `https://api.example.com/users/search?${params.toString()}`;
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

// 3. Способ: встроенная поддержка в fetch (fetch API URL конструктор)
const searchParams = new URLSearchParams();
searchParams.append('name', 'John');
searchParams.append('age', '30');
searchParams.append('sort', 'name');

const baseUrl = 'https://api.example.com/users/search';
fetch(`${baseUrl}?${searchParams}`)
  .then(res => res.json())
  .then(data => console.log(data));

// 4. Способ: использование URL конструктора
const url = new URL('https://api.example.com/users/search');
url.searchParams.append('name', 'John');
url.searchParams.append('age', '30');
url.searchParams.append('sort', 'name');

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));

Сравнение: Query параметры vs Body параметры

QUERY ПАРАМЕТРЫ (передаются в URL):
- GET /api/users?name=John&age=30
- Видны в URL строке
- Логируются в истории браузера
- Длина ограничена (~2000 символов)
- Кэшируются браузером
- Не должны содержать чувствительные данные

BODY ПАРАМЕТРЫ (передаются в теле запроса):
- POST /api/users
  Content-Type: application/json
  {"name": "John", "age": 30}
- Скрыты в теле запроса
- Не видны в URL
- Нет ограничений по длине
- Не кэшируются (для POST)
- Могут содержать чувствительные данные

Практический пример: поиск и фильтрация

// React компонент для поиска пользователей
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

export function UserSearch() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  // Получить текущие параметры из URL
  const name = searchParams.get('name') || '';
  const age = searchParams.get('age') || '';
  const sort = searchParams.get('sort') || 'name';

  // Загрузить данные при изменении параметров
  useEffect(() => {
    if (name || age) {
      setLoading(true);
      
      const params = new URLSearchParams();
      if (name) params.append('name', name);
      if (age) params.append('age', age);
      params.append('sort', sort);
      
      fetch(`/api/users/search?${params}`)
        .then(res => res.json())
        .then(data => setResults(data))
        .finally(() => setLoading(false));
    }
  }, [name, age, sort]);

  // Обновить query параметры при поиске
  const handleSearch = (newName, newAge) => {
    const params = new URLSearchParams();
    if (newName) params.append('name', newName);
    if (newAge) params.append('age', newAge);
    params.append('sort', sort);
    
    setSearchParams(params);
  };

  return (
    <div>
      <input
        placeholder="Search by name"
        value={name}
        onChange={(e) => handleSearch(e.target.value, age)}
      />
      <input
        placeholder="Search by age"
        value={age}
        onChange={(e) => handleSearch(name, e.target.value)}
      />
      
      {loading && <p>Loading...</p>}
      <ul>
        {results.map(user => (
          <li key={user.id}>{user.name} ({user.age})</li>
        ))}
      </ul>
    </div>
  );
}

Важные моменты при работе с Query параметрами

URL Encoding

// Пробелы и специальные символы кодируются
const params = new URLSearchParams();
params.append('name', 'John Doe'); // Будет: name=John+Doe
params.append('email', 'john@example.com'); // Будет: email=john%40example.com

// URLSearchParams автоматически кодирует значения
console.log(params.toString());
// "name=John+Doe&email=john%40example.com"

Множественные значения

// Несколько параметров с одним именем
const params = new URLSearchParams();
params.append('id', '1');
params.append('id', '2');
params.append('id', '3');

// /api/users?id=1&id=2&id=3
const ids = params.getAll('id'); // ['1', '2', '3']

Вывод

Query параметры передаются в URL строке после символа ? в виде пар ключ=значение, разделенных &. Они видны в адресной строке, логах и истории браузера, поэтому не подходят для чувствительных данных. Это удобный способ для передачи фильтров, поиска и параметров пагинации.