0Pricing
TypeScript Academy · Урок

Работа с FormData, URL и URLSearchParams

Собирайте данные форм с помощью FormData, безопасно разбирайте и создавайте URL и изменяйте параметры запроса с помощью URLSearchParams.

«Работа с FormData, URL и URLSearchParams» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.

Введение

Цель: работать с API данных браузера: FormData, URL и URLSearchParams.

  • Собирать значения формы
  • Создавать и разбирать URL
  • Управлять параметрами запроса

Основы FormData

FormData собирает поля формы по имени. Перебор entries() возвращает пары [name, value] в виде строк или объектов File.

const form = document.querySelector("form#login");
if (form) {
  const fd = new FormData(form);
  for (const [key, val] of fd.entries()) {
    console.log(key, val);
  }
}

Добавление в FormData

Вы можете вручную создать FormData с помощью append, в том числе добавлять объекты Blob/File для загрузки.

const fd = new FormData();
fd.append("username", "alice");
fd.append("file", new Blob(["hi"]), "greet.txt");

for (const [k,v] of fd.entries()) {
  console.log(k, v);
}

Части URL

URL разбирает строку на части (hostname, pathname, search, hash). Это безопаснее, чем вручную разделять строку.

const url = new URL("https://example.com/page?x=1");
console.log(url.hostname); // example.com
console.log(url.pathname); // /page

Получение параметра URLSearchParams

URLSearchParams позволяет легко читать и записывать параметры запроса. get() возвращает string | null.

const params = new URLSearchParams("?q=go&type=video");
console.log(params.get("q")); // go
console.log(params.get("missing")); // null

Обновление параметров

Обновляйте параметры с помощью set, добавляйте с помощью append, удаляйте с помощью delete. Используйте toString() для сериализации.

const params = new URLSearchParams();
params.set("page", "1");
params.set("q", "typescript");
console.log(params.toString()); // page=1&q=typescript

Проверка получения параметров

Быстрая проверка: что возвращает URLSearchParams.get("key"), если ключ отсутствует?

Повторение

Повторение: FormData собирает имена и значения полей ввода. URL безопасно разбирает адрес. URLSearchParams управляет параметрами запроса.

Часто задаваемые вопросы

Урок «Работа с FormData, URL и URLSearchParams» бесплатный?

Да — полный текст урока «Работа с FormData, URL и URLSearchParams» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Работа с FormData, URL и URLSearchParams»?

Собирайте данные форм с помощью FormData, безопасно разбирайте и создавайте URL и изменяйте параметры запроса с помощью URLSearchParams. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Работа с FormData, URL и URLSearchParams»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типы lib DOM и querySelector (строгая проверка на null)
  2. Типы событий, пользовательские события; сужение подтипов HTMLElement
  3. Работа с FormData, URL и URLSearchParams
← Назад к TypeScript Academy