javascript - 使用 Javascript 将 URL 查询字符串传递到 HTML 表单字段
问题描述
我一直使用 PHP 将查询字符串传递到表单中,但我希望转移到静态站点场景并需要来自 URL 的查询数据来填充表单字段。
我的代码没有控制台错误,但数据没有传递到表单字段。有谁知道如何在所有现代和旧版浏览器中做到这一点?
function getQueryString() {
var result = {};
if(!window.location.search.length) return result;
var qs = window.location.search.slice(1);
var parts = qs.split("&");
for(var i=0, len=parts.length; i<len; i++) {
var tokens = parts[i].split("=");
result[tokens[0]] = decodeURIComponent(tokens[1]);
}
return result;
}
$(document).ready(function() {
$("#theForm").submit(function(e) {
//var that = this;
var qs = getQueryString();
for(var key in qs) {
var field = $(document.createElement("input"));
field.attr("name", key).attr("type","hidden");
field.val(qs[key]);
$(this).append(field);
}
});
});
https://formpopulate.netlify.com/index.html?name=john&email=john@aol.com https://formpopulate.netlify.com/
解决方案
您应该使用 URL seachParams:
var params = (new URL("https://example.com/?name=Jonathan&age=18&test=a%20long%20string")).searchParams;
var name = params.get("name"); console.log(name); // is the string "Jonathan"
var age = parseInt(params.get("age")); console.log(age);// is the number 18
var test = params.get("test"); console.log(test); // is a long string
推荐阅读
- php - Laravel:雄辩的关系不起作用。无法在视图中显示关系
- javascript - 用户可编辑倒数计时器
- c++ - 如何使用外部类?
- c# - 当一个线程匹配 if 语句时,如何跳出 Parallel.For 循环?
- python - 使用语音识别的 Python 语音到文本
- python - Python3多处理队列和多个线程没有从join()正确完成?
- dictionary - Rocket Universe Dictionary 将 VM 属性值传递给子程序
- javascript - 如何获取变量的字符串表示形式,如 console.log 所示
- oracle - pl/sql 中的光标
- linux - nohup 进程显示在 ps 中,但不在顶部