如何通过 url 将参数传递给 javascript 并将其显示在页面上？答案

【问题标题】：How to pass a parameter to a javascript through a url and display it on a page?如何通过 url 将参数传递给 javascript 并将其显示在页面上？
【发布时间】：2021-06-25 03:36:14
【问题描述】：

例如，我有一个这样的网址：www.mysite.com/my_app.html

如何将值“Use_Id = abc”传递给它并使用 javascript 在该页面上显示？

【问题讨论】：

那么，你想显示 URL 中的所有参数吗（如果我没记错的话）？
如果是这样，请参阅我的回答它返回一个数组。从那里你可以挑选你想要的。

标签： javascript parameters

【解决方案1】：

在不需要外部库的情况下编写自己的代码应该不会太难。

// www.mysite.com/my_app.html?Use_Id=abc 

var GET = {};
var query = window.location.search.substring(1).split("&");
for (var i = 0, max = query.length; i < max; i++)
{
    if (query[i] === "") // check for trailing & with no param
        continue;

    var param = query[i].split("=");
    GET[decodeURIComponent(param[0])] = decodeURIComponent(param[1] || "");
}

用法：GET.Use_id 或 GET["Use_id"]。您还可以使用"Use_id" in GET 检查参数是否存在，即使它具有空值（将返回真或假）。

【讨论】：

你能解释一下最后一行吗？ GET[decodeURIComponent(param[0])] = decodeURIComponent(param[1] || "");
没关系，我明白了：将 html 编码的字符串（%20 等）解码恢复正常。

【解决方案2】：

调用页面www.mysite.com/my_app.html?Use_Id=abc

然后在该页面中使用 javascript 函数，例如：

var urlParam = function(name, w){
    w = w || window;
    var rx = new RegExp('[\&|\?]'+name+'=([^\&\#]+)'),
        val = w.location.search.match(rx);
    return !val ? '':val[1];
}

使用它：

var useId = urlParam('Use_Id');

第二个参数w 是可选的，但如果您想读取 iframe 或父窗口上的参数，则很有用。

【讨论】：

您的代码非常有用！谢谢。 php中的post方法怎么样？
@S.P.H.I.N.X 当您在 PHP 页面上发帖时，不再有客户端 JavaScript。您需要在服务器上使用 PHP 进行解析，无论是发布的数据还是在此处的 url 中。

【解决方案3】：

www.mysite.com/my_app.html?use_id=abs

var qs = new QueryString()

// use_id is now available in the use_id variable
var use_id = qs.get("use_id");

【讨论】：

QueryString 代码可以在web.archive.org/web/20101025074108/http://adamv.com/dev/…找到

【解决方案4】：

www.mysite.com/my_app.html?Use_Id=abc


var querystring = window.location.querystring;
var myValue = querystring["Use_Id"];

http://prettycode.org/2009/04/21/javascript-query-string/

【讨论】：

【解决方案5】：

这里有一个类似的问题What is the easiest way to read/manipulate query string params using javascript?

似乎推荐使用 jQuery 的 Querystring 插件：http://plugins.jquery.com/project/query-object

【讨论】：

【解决方案6】：

您的服务器端脚本可以读取该值并将其设置在您的 JS 可以读取的隐藏表单字段中。

【讨论】：