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

JavaScript中如何从URL（GET）中获取值？

  • 772

在许多情况下，我需要获取由 提供的值来执行操作，或者只是将所述数据打印给用户，URL而无需通过服务器端语言（除其他外）。PythonPHPRuby

什么是最好的解决方案？

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. 我已经使用Chris Coyier创建的函数有一段时间了，它对我来说效果很好，我没有遇到任何问题，而且它不使用正则表达式：

    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;
}

    示例：

    网址：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. 您可以通过使用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 编写了一个扩展程序，该扩展程序在自述文件中提供了 resful 和不友好 url 的参数是说明

    https://github.com/marcmayol/jquery_extension_url_reader

    • -3