在按钮点击时传递查询参数的最佳方式

Question

我正在开发一些代码库，其中 JSP 页面上的现有 bootstrap 按钮类似于：

<nav class="navbar navbar-dark bg-primary">
    <div class="container-fluid pr0">
        <button class="btn btn-primary navbar-btn ml8" onclick="location.href ='/Configuration/AddConfiguration'">Add Configuration</button>
    </div>
</nav>

我想从这里传递一些查询参数，例如 - "/Configuration/AddConfiguration?program=${param.program}&location=${param.location}"。

我应该如何在查询中传递这些参数？

注意：在另一个 SO Post 中，提到如果方法是 GET，我们不能通过操作传递查询参数，否则 POST - 我想我们可以这样做（不是当然可以）。

那么我可以遵循哪些最佳实践来将这些作为查询参数传递？

我的想法是制作一个表单，然后将这些查询参数作为该表单的隐藏字段传递。但是，要传递查询参数，是否只有创建表单并将传递的参数作为隐藏字段的方式？

Answer 1

您上面分享的 SO post 似乎只针对 html 表单。

我添加了 JS 函数，它首先构造 url 参数，然后重定向到所需的 URL。

function redirectURL(pageURL, queryParams) {
    let query = Object.keys(queryParams).map(key => 
        `${key}=${encodeURIComponent(queryParams[key])}`).join('&');
    window.location.href = pageURL+'?'+query;
};

将按钮代码重构为：

<button class="btn btn-primary navbar-btn ml8" 
  onclick="redirectURL('/Configuration/AddConfiguration' {program:'${param.program}', marketplace:'${param.marketplace}'})">
  Add Configuration
</button>