Home / Questions / 445
Accepted
Chofoteddy
Asked: 2020-12-05 14:29:12 +0800 CST 2020-12-05 14:29:12 +0800 CST

Как получить значения из URL (GET) в JavaScript?

  • 772

Во многих случаях мне приходилось принимать значение, предоставленное , URLдля выполнения действия или просто для вывода указанных данных пользователю без необходимости использовать язык на стороне сервера ( среди прочего Python, PHP, , ).Ruby

Какое лучшее решение?

javascript

5 Answers

  1. Best Answer

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

    Решение

    В следующем URL-адресе (на английском языке) мы можем получить функцию поддержки: Как я могу получить значения строки запроса в JavaScript?

    Цитируя первоисточник предыдущей ссылки, мы имеем следующее:

    /**
 * @param String name
 * @return String
 */
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

    Использовать

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

    http://www.ejemplo.com.mx/producto?prodId=88

    Значение, которое нужно получить, будет 88 , и мы получим его с помощью:

    var prodId = getParameterByName('prodId');

    Объяснение

    Функция getParameterByName получает параметр типа String (текстовая строка), который будет использоваться для оценки с помощью регулярного выражения, которое ищет все содержимое между концом полученной строки, за которым следует символ равенства (=), и концом строки для поиска ( location.search) или до тех пор, пока не будет найден символ «et», также известный как «амперсанд» (&). В конце указанный текст был найден расшифрованным и возвращен. В редких случаях, когда совпадений не найдено, возвращается пустая строка.

    • 19

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

    function getQueryVariable(variable) {
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0; i < vars.length; i++) {
       var pair = vars[i].split("=");
       if(pair[0] == variable) {
           return pair[1];
       }
   }
   return false;
}

    Пример :

    URL-адрес: http://store.com/shop.php?product_id=32&cat_id=1&sessionid=123 .

    <div>
    <button type="button" onclick="alert(getQueryVariable('sessionid'));">
        sessionid
    </button>
    <button type="button" onclick="alert(getQueryVariable('xyz'));">
        xyz
    </button>
    <button type="button" onclick="alert(getQueryVariable('product_id'));">
        product_id 
    </button>
</div>
<script type="text/javascript">
    function getQueryVariable(variable) {
        // Estoy asumiendo que query es window.location.search.substring(1);
        var query = "product_id=32&cat_id=1&sessionid=123";
        var vars = query.split("&");
        alert(vars);
        for (var i=0; i < vars.length; i++) {
            var pair = vars[i].split("="); 
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return false;
    }
</script>

    Использованная литература:

    • 9 
  3. let params = new URLSearchParams(location.search);
var contract = params.get('contrato');

    Ну, это отлично сработало для меня.

    Интерфейс URLSearchParams определяет полезные методы для работы с параметрами поиска URL.

    Ссылка

    • 4

  4. Вы можете избежать использования Regex или подобных решений, используя URLSearchParams. Вы можете проверить документацию на MDN для получения дополнительной информации о совместимости и многом другом.

    const url = new URL('http://midominio.com/ruta/?param1=valor1&param2=valor2')

const searchParams = url.searchParams

const keys = [...searchParams.keys()]

const object1 = keys
  .reduce((obj, key) =>({...obj, [key]: searchParams.get(key) }), {})
  
const object2 = [...searchParams.entries()]
  .reduce((obj, [key, value]) => ({...obj, [key]: value }), {})

console.log(object1)
console.log(object2)

// [[key1, value1], ...]
console.log([...searchParams.entries()])
// [key1, key2, ...]
console.log([...searchParams.keys()])
// [value1, value2, ...]
console.log([...searchParams.values()])

    ПРИМЕЧАНИЕ . Реализованный код может не работать в некоторых браузерах.

    • 2

  5. Вот в своё время я запрограммировал расширение для jquery которое выдаёт параметры как в ресфуле так и с недружественными урлами в ридми есть инструкция

    https://github.com/marcmayol/jquery_extension_url_reader

    • -3