如何仅使用 javascript 和 HTML 通过链接传递数据？答案

【问题标题】：How can I pass data through a link using just javascript and HTML?如何仅使用 javascript 和 HTML 通过链接传递数据？
【发布时间】：2018-02-25 02:30:21
【问题描述】：

我有一个网站，其中有一个名称列表，单击名称时我需要打开一个新页面。我需要这个页面来显示点击名称的数据，所以我需要通过链接传递一些数据。这可以用 PHP 来完成，但我可以只用 HTML 和 Javascript 来完成吗？必须有一种方法来处理没有服务器端逻辑的动态内容。

编辑：我想澄清一下，本网站的全部目的是以更精简的方式使用现有网站的 API。我只是想调整他们的设置，因此编写服务器逻辑似乎过多，因为我不需要持久数据（为此使用 API）。这个问题是关于我应该如何在这个自定义前端的各个页面中传递 API 数据。

【问题讨论】：

Passing Javascript variable to <a href >的可能重复

标签： javascript html url hyperlink

【解决方案1】：

你可以像这样内联设置uri参数：

<a href="example.com?name=sarah"> Sarah</a>// add a '?' followed by any number of parameters in the format of 'key=value'

您可以使用问号来表示变量的开头，然后您可以添加任意数量的变量（有限制但非常高）

example.com?key1=value1+key2=value2...

【讨论】：

【解决方案2】：

有几个选项，但通常认为您可以在没有服务器端逻辑的情况下更改服务器发送的内容是不合逻辑的。服务器将使用什么逻辑进行更改？

但是，如果您提供相同的页面但只是更改其名称，您可以做的一件事是让页面在任何地方发送没有名称的静态内容，然后简单地放置

<span class='name-of-linked-user'></span>

名称应该出现在哪里。此时，让 john doe 的链接转到“page.html?name=john%20doe”并向页面添加一些静态 jquery。从http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html复制get url参数代码：

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

然后一个简单的 jquery 循环遍历静态内容，使其成为“动态”

$('.name-of-linked-user').each(function(){
  $(this).text(GetURLParameter('name'));
});

【讨论】：

感谢您的回答！我知道我的推理可能令人困惑。阅读我的编辑，看看你的想法。

【解决方案3】：

看看这个方法：

您可以将查询字符串中的数据传递为：

http://www.yourwebsite.com?name=About

您可以使用此函数从查询字符串中获取数据：

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

getUrlVars() 函数将返回：

{
    "Name"    : "About"
}

现在，您可以在任何地方使用 javascript 打印它：

document.getElementById('p').innerHTML(getUrlVars()["name"]);

或

document.write(getUrlVars()["name"]);

【讨论】：