Подробное руководство по одной из самых распространенных и часто задаваемых операций веб-разработки.

Строка запроса — это один из самых классических и используемых способов обмена данными между средами и приложениями.

Исторически использовался как однострочный текст, помещаемый внутри HTML-элемента <isindex> и отправляемый на сервер в качестве дополнения строки запроса к URL-адресу запроса GET, чтобы веб-сервер мог ответить списком совпадающих страниц. ключевые слова.

С появлением Веб-форм строки запроса были переработаны, чтобы содержать поля формы (имя + значения), и, таким образом, получили форма, которую мы знаем сегодня:

  • На основе пары ключ-значение.
  • В каждой паре ключ и значение разделяются знаком равенства =.
  • Последовательности ключ-значение разделяются амперсандом & или точкой с запятой ;.
  • Некоторые символы не могут быть частью URL-адреса и поэтому должны быть закодированы через его представление UTF-8. Например. #, SPACE и так далее.

С тех пор все осталось почти таким же, за исключением вариантов использования, которые выросли.

Прежде чем мы углубимся в тему, давайте взглянем на анатомию URL, чтобы действительно понять, с чем мы имеем дело.

Анатомия URL

URL-кодирование

Для этого процесса в API браузера доступны 2 метода:

  • encodeURI()
  • encodeURIComponent()

encodeURI vs encodeURIComponent

Оба метода кодируют URI, заменяя некоторые особые символы его представлением UTF-8.

Разница заключается в списке исключений символов для каждого метода и заданном допущении URI.

encodeURI

Предполагается, что данный URI является полным и не будет кодировать ничего между URI protocol и host.

Exception list
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

encodeURIComponent

Будет кодировать каждый символ, которого нет в списке исключений.

Exception list
A-Z a-z 0-9 - _ . ! ~ * ' ( )

Пример

encodeURI("http://domain.com/?search=foo&page=1&sortBy=desc");
// outputs "http://domain.com/?search=foo&page=1&sortBy=desc"
encodeURIComponent("http://domain.com/?search=foo&page=1&sortBy=desc")
// outputs "http%3A%2F%2Fdomain.com%2F%3Fsearch%3Dfoo%26page%3D1%26sortBy%3Ddesc"

Доступ к строке запроса URL

Получение строки запроса URL — довольно простая операция, она доступна в свойстве search из window.location API.

Пример

Предполагая, что вы находитесь по следующему URL-адресу, вы получите:

http://domain.com/?search=foo&page=1&sortBy=desc

window.location.search
// outputs "?search=foo&page=1&sortBy=desc"

Хорошо! Мы разобрались с основами, так что пришло время перейти прямо к сути.

Формулы

ES6

Машинопись