时间戳

首页 > 解决方案 > 如何使用 Javascript 将查询参数附加到我的 URL？

javascript - 如何使用 Javascript 将查询参数附加到我的 URL？

问题描述

我正在构建一个网络应用程序，我正在使用 Firebase 将我的用户数据存储在 Cloud Firestore 中。我的网络应用上有一个页面，允许用户从 Cloud Firestore 查看他们的文档。我想在我的 URL 末尾添加一个查询参数，view.html以便我可以获取该查询参数值并使用它来搜索文档。

我一直在网上寻找可能的解决方案。到目前为止，我已经看到了一些关于该主题的视频，但它们并没有深入到我所需要的深度。例如，此视频展示了如何从 URL 添加和获取查询参数，但它仅展示了如何在控制台中记录这些更改。我将如何制作我的网址？

我也在浏览 Stackoverflow 寻找解决方案。这个 Stackoverflow 帖子提出了一个类似的问题，但是，答案中的许多解决方案会导致view.html重新加载循环。为什么会这样，如果这是一个可能的解决方案，我将如何阻止这种情况发生。

我将如何在 Javascript 中附加和获取 URL 查询参数？

标签： javascripturlquery-parameters

解决方案

您说您想在 javascript 中执行此操作，所以我假设页面本身正在构建/修改一个链接，以便在页面上放置或直接通过 javascript 访问。

在浏览器的 javascript 中有URL对象，它可以构建和分解 URL

let thisPage = new URL(window.location.href);
let thatPage = new URL("https://that.example.com/path/page");

无论如何，一旦你有了一个 URL 对象，你就可以访问它的各个部分来读取和设置值。

添加查询参数使用 URL 的searchParams属性，您可以在其中添加参数 - 您不必担心管理?和&……该方法会为您处理。

thisPage.searchParams.append('yourKey', 'someValue');

这在此页面上演示了它，添加搜索参数并在每个步骤中显示 URL：

let here = new URL(window.location.href);
console.log(here);
here.searchParams.append('firstKey', 'theValue');
console.log(here);
here.searchParams.append('key2', 'another');
console.log(here);

推荐阅读