如何从 url 参数预填充 html 表单输入字段？答案

【问题标题】：How can I pre-populate html form input fields from url parameters?如何从 url 参数预填充 html 表单输入字段？
【发布时间】：2011-07-22 06:59:19
【问题描述】：

我有一个普通的 html 页面，里面有一个表单。要求能够通过 url 预填充表单。比如：

http://some.site.com/somePage.html?forename=Bob&surname=Jones

我似乎找不到任何简单的解决方案。有人可以用一些javascript为我指出正确的方向来完成这个吗？很高兴使用 javascript 解决方案，但我宁愿避免仅仅为了这个单一用途而拉入整个库（目前没有使用）。谢谢。

【问题讨论】：

标签： html forms url parameters

【解决方案1】：

使用自定义查询字符串 Javascript 函数。

function querySt(ji) {

    hu = window.location.search.substring(1);
    gy = hu.split("&");

    for (i=0;i<gy.length;i++) {
        ft = gy[i].split("=");
        if (ft[0] == ji) {
            return ft[1];
        }
    }
}
var koko = querySt("koko");

然后将检索到的值赋给输入控件；类似：

document.getElementById('mytxt').value = koko;

【讨论】：

【解决方案2】：

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

var get = getUrlVars();

//returns get['forename'] == bob; surname == jones

【讨论】：

谢谢，我喜欢这个简单的外观。我的 javascript 有点生疏了。能简单介绍一下var vars = [],hash;吗？
这只是在逗号分隔的列表中声明变量。 vars = [] 实例化一个新的空数组，而 hash 是一个单独的变量。只是一次声明 2 的简写方式。
啊，当然。我错误地将hash 与[] 关联起来。
太棒了！我遇到了完全相同的问题（必须在静态 HTML 页面上预先填充表单），这就是诀窍。
谢谢！对于其他人的参考，如果您只想要值对，请删除 vars.push(hash[0]); 并通过 get['exampleKey'] 引用它们等等。

【解决方案3】：

你在使用 PHP 吗？如果是这样，那会让事情变得容易得多。假设您的链接如上，您可以使用：

<?php
$forename = $_GET['forename'];
$surname = $_GET['surname'];
?>
----------
<input id='forename' type='text' value='<?php echo $forename; ?>' >
<input id='surname' type='text' value='<?php echo $surname; ?>' >

这应该为您预先填充。

【讨论】：

不是我投反对票，但恐怕我没有使用PHP。
也许 paradox870 在他的回答前加上“我看到我之前的人回答了 javascript 中的方法，但我还想指出这可以在 PHP 中执行.. 事实上，这是一种方法……”。我发现如果您尝试提供比原始问题更多的帮助，stackoverflow 用户往往会很快变得消极……有时他们会过火。我可以理解这一点，因为您不先回答问题，而是告诉某人以另一种方式回答，但在这种情况下，问题实际上已被回答，他只是指出了另一种选择。
该示例易受 XSS 攻击：如果$forename=="'><script>alert('hi');</script><" 会发生什么？

【解决方案4】：

这里是内置方式，供参考： https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

您可以将当前地址的参数实例化为 URL 对象，而无需导入任何库，如下所示：

let params = (new URL(document.location)).searchParams;

那你就可以直接引用了：

let name = params.get('name');

或者您可以循环使用它们，例如：

for (const [key, value] of params.entries()) {}

【讨论】：