Get параметр в url: Как передать get параметры в Url? — Хабр Q&A

HTTP-запрос методом GET.

Одним из способов, как можно отправить запрос по протоколу HTTP к серверу, является запрос методом GET. Этот метод является самым распространенным и запросы к серверу чаще всего происходят с его использованием.

Самый простой способ, как можно создать запрос методом GET- это набрать URL-адрес в адресную строку браузера.

Если у вас есть желание погрузиться в тему серверного программирования глубже, все мои уроки здесь.

Браузер передаст серверу примерно следующую информацию:

GET / HTTP/1.1
Host: site.ru
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Cookie: wp-settings
Connection: keep-alive

Запрос состоит из двух частей:

1. строка запроса (Request Line)

2. заголовки (Message Headers)

Обратите внимание, что GET запрос не имеет тела сообщения. Но, это не означает, что с его помощью мы не можем передать серверу никакую информацию. Это можно делать с помощью специальных GET параметров.

Чтобы добавить GET параметры к запросу, нужно в конце URL-адреса поставить знак «?» и после него начинать задавать их по следующему правилу:

имя_параметра1=значение_параметра1& имя_параметра2=значение_параметра2&…

Разделителем между параметрами служит знак «&».

К примеру, если мы хотим передать серверу два значения, имя пользователя и его возраст, то это можно сделать следующей строкой:

http://site.ru/page.php?name=dima&age=27

Когда выполнен данный запрос, данные попадают в так называемую переменную окружения QUERY_STRING, из которой их можно получить на сервере с помощью серверного языка веб-программирования.

Вот пример, как это можно сделать на языке PHP.

<?php
echo "Ваше имя: " . $_GET["name"] . "<br />";
echo "Ваш возраст: " . $_GET["age"] . "<br />";
?>

Конструкция $_GET[«имя_параметра»] позволяет выводить значение переданного параметра.

В результате выполнения этого кода в браузере выведется:

Ваше имя: dima
Ваш возраст: 27

Кстати, переходя по какой-либо ссылке, которая оформлена в HTML вот так:

<a href="link.php?name=dima">Ссылка</a>

мы тоже выполняем запрос к серверу методом GET.

Все мои уроки по серверному программированию здесь.

Применение параметров URL | AdsBridge

При построении ссылок веб-страниц, а также в работе с трафиком и его источниками используют URL-параметры. Это установленные значения в линке, которые добавляются после доменного имени для динамической передачи дополнительной информации. С помощью этих переменных, ваша страница или подстраница сайта становится более гибкой, что позволяет поднять её в поисковой выдаче и увеличить количество посещений. По сути, устанавливая параметры URL в конечную ссылку, вы тем самым можете настроить передачу всевозможных данных, которые будут фиксироваться в статистике и позволят проанализировать эффективность отработанной кампании.

Обзор URL параметров

Прежде всего, их роль заключается в предоставлении дополнительной информации о вашем веб-сайте, чем вы занимаетесь, кто вы и т.д. В зависимости от того, какие переменные добавлены в URL-ссылку или шаблон страниц, поисковые системы будут обрабатывать её части, группируя подобные и исключая возможность выдачи дублируемого контента в результатах. Есть разные примеры настроек линок для дальнейшей индексации и исключения повторов. Допустим, это онлайн-магазин одежды. В настройке ссылки кампании, динамические параметры помогут поисковой системе выбрать и показать один и тот же контент, только под разными адресами и так, чтобы это совпадало с данными источника трафика. Например, если пользователи из разных стран. Говоря простым языком, установленные параметры URL служат индикатором для передачи данных с источника, что в процессе обеспечивает эффективную расшивку трафика на целевые офферы. Однако для того чтобы этот механизм отрабатывал правильно, нужно понимать, как именно и какие значения вписывать.

Применение параметров URL

Не стоит торопиться добавлять множество супер важных параметров в URL-адрес кампании. Сначала нужно понимать, как это сделать правильно, чтобы индексации прошла успешно и ваша веб-страница или подстраница поднялась в выдаче. Рассмотрим примеры построения линок.

Ваш веб-сайт:

https://www.onlinestore.com/

Если разбить адрес на части, то сначала идёт протокол – https:// (англ. HyperText Transfer Protocol Secure) и за ним следует доменное имя страницы, в нашем случае – это www.onlinestore.com.

Теперь, мы добавим параметр, который состоит из переменной и значения. Выглядит это так:

?parameter=value

Знак вопроса «?» это символ, который указывает на начало запроса. Ставится он в конце исходной ссылки. Знак равенства «=» отделяет переменную от значения и образует пару.

Таким образом, мы получаем следующий URL-адрес:

https://www.onlinestore.com?parameter=value

Если вы хотите указать не одну, а несколько пар параметров, используйте символ амперсанда «&», чтобы отделить последующие пары значений. Пример ниже:

https://www.onlinestor.com?product=socks&color=black&size=m

В случае работы с трекером, вы можете добавлять динамические параметры в URL-ссылку. Их вписывают немного другим способом, а именно:

https://www.onlinestore.com?value={parameter}

Переменная в фигурных скобках { } сообщает системе, что вы хотите получить обратно данные этого значения после того как пользователь кликнул на рекламу. Так, трекер получает данные с источника трафика и записывает их в статистику.

Это самый простой способ передать параметры URL на любую веб-страницу, оффер или лендинг, используя HTML код. Однако есть примеры использования этих параметров в php и JavaScript для передачи значений, их хранения, сокрытия или трекинг. Подбирая формат включения переменных в код, вы сможете настроить определённую логику для сбора необходимой информации по трафику.

Кроме того, отработка параметров также зависит от метода HTTP. Чаще всего используют get параметры в адресной строке, чтобы запрашивать данные с источников.

URL get параметры

Данные значения предоставлены в форме запроса и работают на приём данных с источника трафика, которые в последствие передаются через трекер на сторону партнёрской сети. Их ещё называют токенами, которые устанавливаются в конце ссылки кампании для передачи статистических и динамических значений. Использование таких токенов, не зависимо от их количества, позволяют настроить уникальные страницы с get-параметрами. К примеру, вы можете настроить подстановку значений:

“Важная информация для пользователей {{os}}!”

Здесь, в значение {{os}} подставляется тип оперативной системы: Android или iOS. В зависимости от полученных данных, система определит устройство и покажет соответствующий контент на целевой странице. Подобным образом, вы можете отследить различные переменные в URL-адресах, такие как страна, язык, город, тип трафика, устройство, браузер, и т.д. Трекер используют для оптимизации процесса, когда вы настраиваете несколько кампаний сразу и отправляете пользователей на разные страницы.

В дополнение, параметры URL позволяют определить, какая кампания отработала лучше с разными источниками трафика. Добавляя их в линку, вы собираете статистику по всем кампаниям и расшитому трафику на конкретные лендинги и офферы.

Как работать с параметрами в AdsBridge

Главное преимущество трекинг платформ в том, что они автоматизируют настройки URL-адресов для эффективной расшивки трафика от источников к партнёркам. Современный трекер позволяет вам контролировать потоки и распределять пользователей на конкретные страницы по множеству параметров. AdsBridge – одно из лидирующий SaaS-решений с полноценным функционалом, кастомными настройками и авто-оптимизацией. Работая с URL-параметрами на AdsBrdige, вы экономите много драгоценного времени на настройках и получение подробной статистики для дальнейшего анализа. Таким образом, вы не только создаёте уникальные линки, но и собираете полную аналитику по их эффективности.

При создании URL кампании в системе AdsBridge, вы можете указать ValueTrack переменные, которые хотите получать с источника и передавать на веб-сайт. Данный тип значений помогает собрать данные по совершённому клику, которые в дальнейшем учитываются в статистике. Но для этого, вам также понадобятся макросы с источника трафика, чтобы получать статистические и динамические данные.

Платформа также предоставляет удобный сервис по сокращению ссылок. Когда вы добавляете более пяти параметров в одну линку, она становится очень громоздкой. На AdsBridge такую URL-строку можно сократить с помощью инструмента Index Page. При этом все параметры группируются и добавляются к домену. Отрабатывать такая ссылка будет также:

http://onlinestore.com/c/1234567?click_id={click_id}&token1={token1}

С помощью этой функции, намного проще работать с конечной ссылкой кампании и устанавливать её на источники. Сокращенные URL-строки упрощают процесс модерации на Google AdWords. По сути, вы будете получать все данные в статистике по запрашиваемой информации только, вместо длинной полосы в адресной строке, у вас будет отображаться короткая линка.

В заключении

Параметры URL играют важную роль в индексации веб-сайта, а также во время клика, когда пользователей редиректят на целевые офферы. Данные переменные также помогают собрать и записать полезную информацию о трафике, обеспечить более точный таргетинг и избежать дублирование контента. А если вы используете трекер, то создавать URL-адреса с добавлением этих значений не составит труда. Без дополнительных параметров в URL-строке, кампании рискуют попасть в бан. Чтобы они отрабатывали успешно и ваша веб-страница или подстраница приносила результат, убедитесь, что установленные значения и переменные в URL-адресе отрабатывают правильно.

Обработка GET-запроса в строке URL средствами PHP

Нередко возникает задача обработки GET-запроса, содержащегося в строке URL: например, получение подстроки, отвечающей за этот запрос, замена параметров запроса, удаление его из URL и др. В данной статье читателю предлагаются простые функции, решающие некоторые из таких задач.

Вообще говоря, любая строка URL в терминах PCRE ¹ может быть нестрого описана вот таким регулярным выражением:

/^([^?]+)(\?.*?)?(#.*)?$/

Приведенное выше регулярное выражение описывает GET-параметры как фрагмент строки адреса, начинающийся со знака вопроса и продолжающийся до конца строки или до первой решётки (#), если таковая имеется ²; про якоря (anchors) в адресах часто забывают — именно они объявляются с помощью решётки.

Вооружившись функциями для работы с регулярными выражениями, несложно проводить с GET-параметрами различные манипуляции.

Получение строки GET-запроса.

Для начала поставим самую простую задачу — получить часть URL, содержащую GET-параметры.

function ggp($url) { // get GET-parameters string
    preg_match(‘/^([^?]+)(\?.*?)?(#.*)?$/’, $url, $matches);
    $gp = (isset($matches[2])) ? $matches[2] : »;
    return $gp;
}

Не стоит забывать, что адрес может вовсе не содержать никакого GET-запроса, и массив совпадений может не иметь второго элемента ³.

Исключение GET-запроса из URL.

Иногда нужно получить URL без GET-параметров (например, при перенаправлении запросов с помощью mod_rewrite зачастую требуется проводить анализ URL, чтобы сформировать ответ клиенту; нередко для анализа нужна только статическая часть URL, а часть, где передается GET-запрос, не нужна и даже мешает). Эта операция занимает фактически одну строку, но, чтобы не писать каждый раз однотипный код, удобно вынести его в функцию ⁴:

function rgp($url) { // remove GET-parameters from URL
    return preg_replace(‘/^([^?]+)(\?.*?)?(#.*)?$/’, ‘$1$3’, $url);
}

Замена содержимого GET-параметров.

Нередко требуется, имея адрес страницы, добавить к нему какой-нибудь GET-запрос. Как правило, это делается простым дописыванием к адресу строки вида ?имя_переменной=значение. Однако не всегда бывает заранее известно, не содержит ли уже адрес какого-нибудь GET-запроса — если вдруг содержит, то простое дописывание приведет к адресу, содержащему два знака вопроса (вида ‘?имя1=значение1?имя2=значение2’) и потому некорректному, что приводит к необходимости на этот счет строку адреса специально проверять.

Еще более сложная ситуация возникает в случае, когда в URL уже может находиться нужный к передаче GET-параметр (т.е. с тем же именем) — в этом случае нужно даже не просто корректно дописать адрес, а найти там нужную переменную и переписать её значение. Например, было

/article.php?view=flat&page=3&mode=1#note_1

, а нужно

/article.php?view=flat&page=4&mode=1#note_1

Все эти задачи может решить функция sgp():

$url = ‘/article.php?view=flat&page=3&mode=1#note_1’;
echo sgp($url, ‘page’, 4); // выведет ‘/article.php?view=flat&page=4&mode=1#note_1’
echo sgp($url, ‘view’, ‘tree’); // выведет ‘/article.php?view=tree&page=3&mode=1#note_1’
echo sgp($url, ‘view’, »); // выведет ‘/article.php&page=3&mode=1#note_1’

За один вызов функции можно менять и несколько переменных:

sgp(
        $url,
        array(‘page’, ‘view’),
        array(4, ‘normal’)
    ); // ..?view=normal&page=4&mode=1#note_1
   
sgp(
        $url,
        array(‘page’, ‘view’),
        NULL // или просто опустить третий аргумент
    ); // ..?mode=1#note_1

В примерах для краткости изложения приведены относительные имена. Функция, разумеется, может работать и с абсолютными адресами, подчиняющимися стандарту URI. Код функции достаточно прост:

function sgp($url, $varname, $value) // substitute get parameter
{
     if (is_array($varname)) {
         foreach ($varname as $i => $n) {
            $v = (is_array($value))
                  ? ( isset($value[$i]) ? $value[$i] : NULL )
                  : $value;
            $url = sgp($url, $n, $v);
         }
         return $url;
     }
     
    preg_match(‘/^([^?]+)(\?.*?)?(#.*)?$/’, $url, $matches);
    $gp = (isset($matches[2])) ? $matches[2] : »; // GET-parameters
    if (!$gp) return $url;
   
    $pattern = «/([?&])$varname=.*?(?=&|#|\z)/»;
    if (preg_match($pattern, $gp)) {
        $substitution = ($value !== ») ? «\${1}$varname=» . preg_quote($value) : »;
        $newgp = preg_replace($pattern, $substitution, $gp); // new GET-parameters
        $newgp = preg_replace(‘/^&/’, ‘?’, $newgp);
    }
    else    {
        $s = ($gp) ? ‘&’ : ‘?’;
        $newgp = $gp.$s.$varname.’=’.$value;
    }
   
    $anchor = (isset($matches[3])) ? $matches[3] : »;
    $newurl = $matches[1].$newgp.$anchor;
    return $newurl;
}

Ниже в статье приводится также версия функции без интенсивного использования регулярных выражений.

Для начала получаем GET-параметры адреса (код, аналогичный функции ggp()):

preg_match(‘/^([^?]+)(\?.*?)?(#.*)?$/’, $url, $matches);
$gp = (isset($matches[2])) ? $matches[2] : »; // GET-parameters

Если GET-параметры отсутствуют — заменять негде, переданный адрес заведомо останется неизменным и его можно сразу вернуть, завершив работу функции:

if (!$gp) return $url;

Далее нужно сконструировать регулярное выражение, описывающее указание в адресе на данную переменную GET-запроса. Это регулярное выражение должно ловить строку вида имя_переменной=значение, которой предшествует знак вопроса или амперсанд, и вслед за которой следует конец строки (самый, наверное, частый случай), амперсанд (если начинается объявление следующей GET-переменной) или же решётка (если адрес содержит якорь):

$pattern = «/([?&])$varname=.*?(?=&|#|\z)/»;

Далее логика программы такая: если функции передается новое значение переменной, то производится замена старого значения на новое (при этом используется фрагмент строки, захваченный первой подмаской — это будет знак вопроса или амперсанд). Если же новое значение переменной — ни что иное, как пустая строка, то следует совсем исключить упоминание об этой переменной из строки запроса (т.е. получить адрес даже не вида /adress.php?v1=&v2=asdf, а просто /adress.php?v2=asdf).
Такое поведение не является полностью строгим, поскольку может приводить к изменению количества передаваемых параметров GET-запроса, однако, автор считает такой вариант работы наиболее удобным, т.к. при этом происходит также очищение запроса от пустых переменных, которые в большинстве случаев являются просто мусором:

$substitution = ($value !== ») ? «\${1}$varname=» . preg_quote($value) : »;
$newgp = preg_replace($pattern, $substitution, $gp); // new GET-parameters

Нужно не забывать и о ситуации, в которой переменная запроса, которую решили убрать, следовала в запросе первой. В таком случае из адреса вида /adress.php?v1=&v2=asdf&v3=1 получится некорректный адрес: /adress.php&v2=asdf&v3=1. В этом адресе первый амперсанд нужно заменить на знак вопроса, а поскольку располагаем мы не только целым адресом, но и отдельно строкой его GET-запроса (в примере — &v2=asdf&v3=1), сделать это особенно легко:

$newgp = preg_replace(‘/^&/’, ‘?’, $newgp);

Если оказалось, что URL не содержит упоминания данной переменной, нужно эту переменную в него дописать, причем сделать это корректно: если URL вовсе не содержит GET-запроса (в этом случае переменная $gp будет содержать пустую строку), декларация переменной должна начинаться со знака вопроса, в противном случае — с амперсанда:

$s = ($gp) ? ‘&’ : ‘?’;

Далее окончательно формируем обновленную строку GET-запроса:

$newgp = $gp.$s.$varname.’=’.$value;

Обрабатываем возможное наличие якоря:

$anchor = (isset($matches[3])) ? $matches[3] : »;

И, наконец, конструируем конечный адрес полностью, дописывая статическую часть адреса страницы и якорь, после чего возвращаем полученный результат:

$newurl = $matches[1].$newgp.$anchor;
return $newurl;

Следует отметить, что эту задачу можно решить и без интенсивного использования регулярных выражений:

function sgp(
        $url,
        $varname,
        $value = NULL, // если NULL — убираем переменную совсем
        $clean = TRUE // превращать ли ?one=&two=
    ) {              // в ?one&two (так адрес красивее)
   
    // Версия функции «substitue get parameter» без регулярных выражений
   
    if (is_array($varname)) {
        foreach ($varname as $i => $n) {
            $v = (is_array($value))
                 ? ( isset($value[$i]) ? $value[$i] : NULL )
                 : $value;
            $url = sgp($url, $n, $v, $clean);
        }
        return $url;
    }
   
    $urlinfo = parse_url($url);
   
    $get = (isset($urlinfo[‘query’]))
           ? $urlinfo[‘query’]
           : »;
   
    parse_str($get, $vars);
   
    if (!is_null($value))        // одновременно переписываем переменную
        $vars[$varname] = $value; // либо добавляем новую
    else
        unset($vars[$varname]); // убираем переменную совсем
       
    $new_get = http_build_query($vars);
   
    if ($clean)
        $new_get = preg_replace( // str_replace() выигрывает
                ‘/=(?=&|\z)/’,     // в данном случае
                »,                // всего на 20%
                $new_get
            );
   
    $result_url =   (isset($urlinfo[‘scheme’]) ? «$urlinfo[scheme]://» : »)
                  . (isset($urlinfo[‘host’]) ? «$urlinfo[host]» : »)
                  . (isset($urlinfo[‘path’]) ? «$urlinfo[path]» : »)
                  . ( ($new_get) ? «?$new_get» : »)
                  . (isset($urlinfo[‘fragment’]) ? «#$urlinfo[fragment]» : »)
                  ;
    return $result_url;
}

Версия без регулярных выражений работает где-то на треть быстрее, однако эта разница не чувствуется, поскольку общее время работы очень мало (1000 итераций выполняются за сотые доли секунды).

© Все права на данную статью принадлежат порталу webew.ru.
Перепечатка в интернет-изданиях разрешается только с указанием автора
и прямой ссылки на оригинальную статью. Перепечатка в печатных
изданиях допускается только с разрешения редакции.

Методы GET и POST. Использование и отличия

HTTP методы GET и POST используются для отправки данных на сервер.

Чаще всего методы используются в HTML формах, гиперссылках и AJAX запросах.

POST и GET запросы можно отправить на сервер с помощью любого программного обеспечения, работающего с протоколом HTTP.

Обработка запросов может отличаться в зависимости от типа сервера.

Большинство действующих сайтов работают с языком программирования PHP. В этом случае передаваемые данные попадают в суперглобальные массивы $_GET и $_POST.

Массивы $_GET и $_POST являются ассоциативными. Таким образом, переданный на сервер параметр с именем «user_name», будет доступен как $_GET[‘user_name’] или $_POST[‘user_name’] в зависимости от используемого метода.

Какой метод использовать GET или POST, чем отличаются методы

Основное отличие метода GET от POST в способе передачи данных.

Запрос GET передает данные в URL в виде пар «имя-значение» (другими словами, через ссылку), а запрос POST передает данные в теле запроса (подробно показано в примерах ниже). Это различие определяет свойства методов и ситуации, подходящие для использования того или иного HTTP метода.

Страница, созданная методом GET, может быть открыта повторно множество раз. Такая страница может быть кэширована браузерами, проиндексирована поисковыми системами и добавлена в закладки пользователем. Из этого следует, что метод GET следует использовать для получения данных от сервера и не желательно в запросах, предполагающих внесений изменений в ресурс.

Например, можно использовать метод GET в HTML форме фильтра товаров: когда нужно, исходя из данных введенных пользователем, переправить его на страницу с отфильтрованными товарами, соответствующими его выбору.

Запрос, выполненный методом POST, напротив следует использовать в случаях, когда нужно вносить изменение в ресурс (выполнить авторизацию, отправить форму оформления заказа, форму обратной связи, форму онлайн заявки). Повторный переход по конечной ссылке не вызовет повторную обработку запроса, так как не будет содержать переданных ранее параметров. Метод POST имеет большую степень защиты данных, чем GET: параметры запроса не видны пользователю без использования специального ПО, что дает методу преимущество при пересылке конфиденциальных данных, например в формах авторизации.

HTTP метод POST поддерживает тип кодирования данных multipart/form-data, что позволяет передавать файлы.

Также следует заметить, что методы можно комбинировать. То есть, при необходимости вы можете отправить POST запрос на URL, имеющий GET параметры.

В каких случаях использовать POST и когда нужно использовать GET

В таблице ниже показаны распространенные варианты использования HTTP запросов с объяснением в чем разница между GET и POST запросами в конкретной ситуации.

Сравнительная таблица HTTP методов GET и POST

В таблице ниже приведены основные свойства и отличия GET и POST методов.

Пример использования GET запроса

В примере показана простая HTML форма фильтра по нескольким параметрам.

HTML код формы, генерирующей GET запрос:

<form method="GET" name="filter" action="http://example.com/catalog/">
<p>Диагональ экрана</p>
<label><input type="radio" name="screen" value="4" checked> 4</label><br>
<label><input type="radio" name="screen" value="4.5"> 4.5</label><br>
<label><input type="radio" name="screen" value="5"> 5</label>
<p>Цвет</p>
<label><input type="checkbox" name="color_black" checked> Черный</label><br>
<label><input type="checkbox" name="color_white" checked> Белый</label><br>
<label><input type="checkbox" name="color_golden"> Золотой</label><br>
<input type="submit" value="Применить фильтр">
</form>

После отправки формы браузер переведет пользователя по ссылке:

http://example.com/catalog/?screen=4&color_black=on&color_white=on

Ссылка содержит URL документа, отвечающего за обработку и блок параметров. Знак «?» отмечает начало блока параметров GET запроса. Далее находятся пары «имя-значение», разделенные знаком «&». Имена параметров отделены от значений знаком «=».

Переход по ссылке, приведенной выше, будет равнозначен отправке формы с указанными параметрами.

Пример использования POST запроса

В примере показана простая HTML форма авторизации.

HTML код формы, генерирующей POST запрос:

<form method="POST" name="authorization" action="http://example.com/profile.php">
Логин: <input type="text" name="username"><br>
Пароль: <input type="password" name="user_password"><br>
<input type="submit" value="Войти">
</form>

После отправки формы браузер переведет пользователя по ссылке:

http://example.com/profile.php

Для того, чтобы увидеть переданные параметры, воспользуемся инструментами разработчика.

Запрос состоит из области заголовков и тела запроса.

В заголовках указана служебная информация: URL обработчика, тип кодирования, параметры браузера и т.д.

В теле запроса содержатся передаваемые параметры. Формат тела запроса может отличаться в зависимости от выбранного типа кодирования.

javascript — Как получить параметр URL в Express?

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

Загрузка…

.

Быстрый совет: получение параметров URL с помощью JavaScript

Параметры URL (также называемые параметрами строки запроса или переменными URL) используются для отправки небольших объемов данных со страницы на страницу или от клиента к серверу через URL. Они могут содержать всевозможную полезную информацию, такую ​​как поисковые запросы, переходы по ссылкам, информацию о продуктах, пользовательские настройки и многое другое.

В этой статье мы покажем вам, как анализировать параметры URL и управлять ими с помощью JavaScript.

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

В современных браузерах это стало намного проще благодаря интерфейсу URLSearchParams.Это определяет множество служебных методов для работы со строкой запроса URL-адреса.

Предполагая, что наш URL-адрес https://example.com/?product=shirt&color=blue&newuser&size=m , мы можем получить строку запроса, используя window.location.search :

  const queryString = window.location.search;
console.log (queryString);

  

Затем мы можем проанализировать параметры строки запроса, используя URLSearchParams :

  const urlParams = новый URLSearchParams (queryString);
  

Затем мы вызываем любой из его методов для результата.

Например, URLSearchParams.get () вернет первое значение, связанное с заданным параметром поиска:

  const product = urlParams.get ('продукт')
console.log (продукт);


const color = urlParams.get ('цвет')
console.log (цвет);


const newUser = urlParams.get ('новый пользователь')
console.log (новыйПользователь);

  

Другие полезные методы

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

Вы можете использовать URLSearchParams.has () , чтобы проверить, существует ли определенный параметр:

  консоль.журнал (urlParams.has ('продукт'));


console.log (urlParams.has ('paymentmethod'));

  

Получение всех значений параметра

Вы можете использовать URLSearchParams.getAll () для возврата всех значений, связанных с определенным параметром:

  console.log (urlParams.getAll ('размер'));



urlParams.append ('размер', 'xl');

console.log (urlParams.getAll ('размер'));

  

Обход параметров

URLSearchParams также предоставляет некоторые знакомые методы итератора Object , позволяющие перебирать его ключи, значения и записи:

  конст.
  ключи = urlParams.ключи (),
  values ​​= urlParams.values ​​(),
  записи = urlParams.entries ();

for (постоянный ключ ключей) console.log (ключ);


for (постоянное значение значений) console.log (значение);


for (постоянная запись записей) {
  console.log (`$ {запись [0]}: $ {запись [1]}`);
}




  

Поддержка браузера

Браузер поддерживает URLSearchParams хорошо. На момент написания он поддерживается всеми основными браузерами.

Если вам нужно поддерживать устаревшие браузеры, такие как Internet Explorer, доступен полифилл. или , вы можете следовать остальной части этого руководства и узнать, как свернуть свой собственный.

Прокрутка собственной функции синтаксического анализа строки запроса

Давайте останемся с URL-адресом, который мы использовали в предыдущем разделе:

  http://example.com/?product=shirt&color=blue&newuser&size=m
  

Вот функция, которая предоставляет вам все параметры URL в виде аккуратного объекта:

  function getAllUrlParams (url) {

  
  var queryString = url? URL.split ('?') [1]: window.location.search.slice (1);

  
  var obj = {};

  
  if (queryString) {

    
    queryString = queryString.split ('#') [0];

    
    var arr = queryString.split ('&');

    for (var i = 0; i  

Скоро вы увидите, как это работает, но сначала приведем несколько примеров использования:

  getAllUrlParams (). Product;
getAllUrlParams (). цвет;
getAllUrlParams (). newuser;
getAllUrlParams (). несуществующий;
getAllUrlParams ('http://test.com/?a=abc') .a;
  

А вот демонстрация, с которой можно поиграть.

См. Pen rQGWpP от SitePoint (@SitePoint) на CodePen.

Что нужно знать перед использованием этой функции

• Наша функция предполагает, что параметры разделены символом и , как указано в спецификациях W3C. Однако формат параметра URL в целом четко не определен, поэтому иногда вы можете увидеть ; или & amp; в качестве разделителей.

• Наша функция по-прежнему работает, если параметр не имеет знака равенства или если он имеет знак равенства, но не имеет значения.

• Значения повторяющихся параметров помещаются в массив.

Если вам просто нужна функция, которую можно добавить в свой код, на этом все готово. Если вы хотите понять, как работает эта функция, читайте дальше.

В следующем разделе предполагается, что вы знаете некоторый JavaScript, включая функции, объекты и массивы. Если вам нужно что-то напомнить, ознакомьтесь со справочником MDN JavaScript.

Как работает функция

В целом, функция берет строку запроса URL (часть после – и перед # ) и выводит данные в виде аккуратного объекта.

Во-первых, эта строка говорит, что если мы указали URL-адрес, получаем все после вопросительного знака, а в противном случае просто используйте URL-адрес окна:

  var queryString = url? url.split ('?') [1]: window.location.search.slice (1);
  

Далее мы создадим объект для хранения наших параметров:

  var obj = {};
  

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

  queryString = queryString.split ('#') [0];
  

Теперь мы можем разбить строку запроса на составные части:

  var arr = queryString.split ('&');
  

Это даст нам массив, который выглядит так:

  ['product = рубашка', 'color = blue', 'newuser', 'size = m']
  

Затем мы пройдемся по этому массиву и разделим каждый элемент на ключ и значение, которые мы скоро поместим в наш объект:

  var a = arr [i] .split ('=');
  

Давайте назначим ключ и значение отдельным переменным.Если значение параметра отсутствует, мы устанавливаем его на true , чтобы указать, что имя параметра существует. Не стесняйтесь изменять это в зависимости от вашего варианта использования:

  var paramName = a [0];
var paramValue = typeof (a [1]) === 'undefined'? истина: a [1];
  

При желании вы можете указать все имена и значения параметров в нижнем регистре. Таким образом, вы можете избежать ситуаций, когда кто-то отправляет трафик на URL-адрес с example = TRUE вместо example = true , и ваш скрипт прерывается.(Я видел, как это происходило.) Однако, если ваша строка запроса должна быть чувствительной к регистру, не стесняйтесь опускать эту часть:

  paramName = paramName.toLowerCase ();
если (typeof paramValue === 'строка') paramValue = paramValue.toLowerCase ();
  

Затем нам нужно разобраться с различными типами ввода, которые мы можем получить в paramName . Это может быть индексированный массив, неиндексированный массив или обычная строка.

Если это индексированный массив, мы хотим, чтобы соответствующее значение paramValue было массивом со значением, вставленным в правильную позицию.Если это неиндексированный массив, мы хотим, чтобы соответствующий paramValue был массивом с помещенным в него элементом. Если это строка, мы хотим создать обычное свойство для объекта и присвоить ему paramValue , , если свойство уже не существует, и в этом случае мы хотим преобразовать существующий paramValue в массив и нажать входящий paramValue на это.

Чтобы проиллюстрировать это, вот пример ввода с ожидаемым результатом:

  getAllUrlParams ('http: // example.com /? colors [0] = красный и цвета [2] = зеленый и цвета [6] = синий ');


getAllUrlParams ('http://example.com/?colors [] = красный и цвета [] = зеленый и цвета [] = синий »);


getAllUrlParams ('http://example.com/?colors=red&colors=green&colors=blue');


getAllUrlParams ('http://example.com/?product=shirt&color=blue&newuser&size=m');

  

А вот код для реализации функциональности:

  if (paramName.match (/ \ [(\ d +)? \] $ /)) {
  var key = paramName.replace (/ \ [(\ d +)? \] /, '');
  если (! obj [ключ]) obj [ключ] = [];

  если (paramName.match (/ \ [\ d + \] $ /)) {
    var index = /\[(\d+)\ ]/.exec(paramName)[1];
    obj [ключ] [индекс] = paramValue;
  } else {
    obj [ключ] .push (paramValue);
  }
} else {
  if (! obj [paramName]) {
    obj [paramName] = paramValue;
  } else if (obj [paramName] && typeof obj [paramName] === 'строка') {
    obj [paramName] = [obj [paramName]];
    obj [paramName] .push (paramValue);
  } else {
    obj [paramName] .push (paramValue);
  }
}
  

Наконец, мы возвращаем наш объект с параметрами и значениями.

Если ваш URL-адрес содержит какие-либо закодированные специальные символы, такие как пробелы (закодированные как % 20 ), вы также можете декодировать их, чтобы получить исходное значение, например:

 

вар оригинал = getAllUrlParams (). test;
var decoded = decodeURIComponent (оригинал);
  

Просто будьте осторожны, чтобы не декодировать то, что уже декодировано, иначе ваш скрипт выдаст ошибку, особенно если задействованы проценты.

В любом случае, поздравляю! Теперь вы знаете, как получить параметр URL-адреса, и, надеюсь, в процессе освоили и другие уловки.

Заключение

Код в этой статье подходит для наиболее распространенных случаев использования, когда вы можете получить параметр запроса URL. Если вы работаете с крайними случаями, такими как необычные разделители или специальное форматирование, обязательно проверьте и отрегулируйте соответственно.

Если вы хотите сделать больше с URL-адресами, доступны специальные библиотеки, такие как query-string и Medialize URI.js. Но поскольку это в основном манипуляции со строками, часто имеет смысл просто использовать простой JavaScript.Независимо от того, используете ли вы свой собственный код или пользуетесь библиотекой, обязательно проверьте все и убедитесь, что это работает для ваших вариантов использования.

Эта статья была обновлена ​​в 2020 году для обеспечения актуальности и точности. Чтобы узнать больше о JavaScript, прочитайте нашу книгу «JavaScript: от новичка до ниндзя», 2-е издание.

.