获取html页面内的url参数答案

【问题标题】：Getting the url parameters inside the html page获取html页面内的url参数
【发布时间】：2014-03-24 10:46:13
【问题描述】：

我有一个 HTML 页面，它使用如下所示的 URL 加载：

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

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

问题

这可以使用Javascript 或jQuery 完成吗？因为我想先使用我的Node.js 本地服务器测试我的页面，然后再将其部署到使用 Java 服务器的远程机器中。
有没有图书馆可以让我这样做？

【问题讨论】：

jQuery 在这里帮不上忙。客户端 JavaScript 还是服务器端 JavaScript？如果是服务器端 JavaScript，您在 Node.js 实例上使用哪些库来执行 HTTP？
为什么你使用 Node.js 进行本地开发，但目标是运行 Java 的服务器？如果您的开发环境尽可能地反映您的生产环境，它会让生活更加轻松。
@Utkanos 客户端...我应该对要加载到页面中的模块进行硬编码，还是可以通过在客户端解析参数并使用状态将正确的模块加载到page.Im 使用 requirejs 的方式

标签： javascript jquery html

【解决方案1】：

给出了一个不错的解决方案here:

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

假设 URL 是，这就是你如何使用这个函数， http://dummy.com/?technology=jquery&blog=jquerybyexample:

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

【讨论】：

【解决方案2】：

//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

【讨论】：

请在发布新答案时至少添加对您的代码在做什么的一般解释以及任何有用的提示 - 例如，知道 URLSearchParams 在 Edge 之前不存在会很有帮助或在其他较旧的浏览器中。对您的代码有一个简单的英语解释总是很好，即使它像您的示例一样非常简单。不过，很好的解决方案。

【解决方案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

Other Useful Methods

【讨论】：

【解决方案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

【讨论】：

谢谢，这是我用过或看过演示的最简单、最简单的方法。
我很乐意提供帮助。我还修改了代码，也打算在旧的网络浏览器上工作