Подробное руководство по одной из самых распространенных и часто задаваемых операций веб-разработки.
Строка запроса — это один из самых классических и используемых способов обмена данными между средами и приложениями.
Исторически использовался как однострочный текст, помещаемый внутри 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-адресу, вы получите:
window.location.search // outputs "?search=foo&page=1&sortBy=desc"
Хорошо! Мы разобрались с основами, так что пришло время перейти прямо к сути.