在HTML页面中获取URL参数

Question

我有一个 HTML 页面，通过类似于这样的 URL 进行加载：

http://localhost:8080/GisProject/MainService?s=C&o=1

我想在不使用jsp的情况下获取URL中的查询字符串参数。

问题

1. 是否可以使用Javascript或jQuery来完成这个操作？ 因为我想在部署到使用Java服务器的远程机器之前，使用我的Node.js本地服务器测试页面。

2. 是否有任何库可以让我这样做？

- vamsiampolu

---

jQuery在这里无法帮助。客户端JavaScript还是服务器端JavaScript？如果是服务器端JavaScript，您在Node.js实例上使用哪些库来进行HTTP操作？ - Quentin

为什么你在使用Node.js进行本地开发，但是目标服务器运行的是Java？如果你的开发环境尽可能地与生产环境相似，那么生活会变得轻松得多。 - Quentin

@Utkanos 客户端...我应该在页面中硬编码要加载的模块，还是可以通过解析客户端参数并使用状态动态加载正确的模块到页面中。顺便说一下，我正在使用 requirejs。 - vamsiampolu

Answer 1

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

以下是您在假网址 http://dummy.com/?technology=jquery&blog=jquerybyexample 上使用此函数的方法：

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');`

- neel shah

---

复制您提供的函数似乎在结尾处存在一个错误字符（零宽空格），这将导致出错。可能是stackoverflow上的临时问题，但为了防止其他任何人复制粘贴上述内容，请注意这一点。 - Allan

Answer 2

Chrome 49 实现了来自 URL 规范的 URLSearchParams，这是一个对于操作 URL 查询参数非常有用的 API。 URLSearchParams 接口定义了一些实用方法，用于处理 URL 的查询字符串。

So what can you do with it? Given a URL string, you can easily extract parameter values as in the code below for s & o parameter:

//http://localhost:8080/GisProject/MainService?s=C&o=1
const params = new URLSearchParams(document.location.search);
const s = params.get("s");
const o = params.get("o");
console.info(s); //show C
console.info(o); //show 1

- Pablo

---

请在发布新答案时至少添加一般性的解释，以及任何有用的提示。例如，当您使用URLSearchParams时，需要知道它在较旧的浏览器（如Edge浏览器之前）中不存在。即使您的示例非常简单，在代码上提供一个简单易懂的英文解释总是很好的。非常棒的解决方案！ - Joseph

这绝对是最好的方法。Mozilla文档应该能够解释这里发生了什么。 - Jordan Mitchell Barrett

Answer 3

假设我们的URL是https://example.com/?product=shirt&color=blue&newuser&size=m，我们可以使用window.location.search来获取查询字符串：

 const queryString = window.location.search;
 console.log(queryString);
 // ?product=shirt&color=blue&newuser&size=m

然后我们可以使用URLSearchParams解析查询字符串的参数：

 const urlParams = new URLSearchParams(queryString);

然后我们在结果上调用任何它的方法。

例如，URLSearchParams.get() 将返回与给定搜索参数相关联的第一个值:

 const product = urlParams.get('product')
 console.log(product);
 // shirt

 const color = urlParams.get('color')
 console.log(color);
 // blue

 const newUser = urlParams.get('newuser')
 console log(newUser);
 // empty string

其他有用的方法

- Chukwuemeka Maduekwe

Answer 4

让我们举一个非编码的URL的例子：

https://stackoverflow.com/users/3233722/pyk?myfirstname=sergio&mylastname=pyk

将工作放在单个JS行中...

urlp=[];s=location.toString().split('?');s=s[1].split('&');for(i=0;i<s.length;i++){u=s[i].split('=');urlp[u[0]]=u[1];}

您可以随时在页面中使用它 :-)

alert(urlp['mylastname']) //pyk

• 即使在像ie6这样的旧浏览器上也可以工作

- PYK

---

谢谢，这是我使用过或看到的最简单和最不复杂的方法。 - Michael Falciglia

很高兴能够帮忙。我还修改了代码，以便在旧的网络浏览器上运行。 - PYK