javascript - 单击时将 GET 参数注入(inject)按钮的目标 URL

Question

我有多个类为 myButton 的按钮。每个按钮都有一个值，该值在单击时发送到服务器。按钮的目标 URL 看起来像这样:

http://mysite/test/test.html?cid=15

在我点击按钮后，应该将以下 GET 参数添加到 URL，然后应该提交按钮:

mySessionVar=1

所以新的 URL 应该是这样的:

http://mysite/test/test.html?cHash=d009eb3f9f4e1020435b96a8f7251ad5&mySessionVar=1

为什么我要注入(inject)它？

我正在使用流体。据我所知，不可能使用 JavaScript 操作流体标签。但是，我需要将 sessionStorage 项目值添加到流体标签 arguments 属性中。

我流畅的代码:

<f:link.action controller="Download" action="download" arguments="{cid: category.uid}" class="myButton">Download</f:link.action>

所以我的尝试是将我的 sessionStorage 项作为 GET 参数附加到按钮的目标 URL，然后发送它，例如:

$(".myButton").on
(
  "click",
  function(event)
  {
      //First prevent the default event
      event.preventDefault();

    ...inject the sessionStorage item as GET parameter to the target URL of the button, then do whatever the button would do normally...

      //Go to new URL
      window.location.replace(NEW URL);
  }
);

这可能吗？

编辑:这是按钮呈现的 HTML 的样子:

<a class="myButton" href="/de/mysite/test/test.html?tx_mydownloads_myfilelist%5Bcid%5D=15&amp;&amp;tx_mydownloads_myfilelist%5Baction%5D=download&amp;tx_mydownloads_myfilelist%5Bcontroller%5D=Download&amp;cHash=d009eb3f9f4e1020435b96a8f7150ad5">Download</a>

编辑:我有另一个想法，也许我可以以某种方式读取目标 URL，然后向其添加新的 GET 参数，然后使用 window.location.replace 加载该 URL？

Answer 1

您确实可以只使用按钮中的 href 并使用它来提供 window.location.href，如下所示:

$('.myButton').on('click', function(e) {

    e.preventDefault();

    var href = $(this).attr('href'),
        queryString = 'mySessionVar='+sessionStorage.getItem("myItem"),
        newHref;

    if (href.indexOf('?') !== -1) {

        newHref = href + '&' + queryString;

    } else {

        newHref = href + '?' + queryString;
    }

    window.location.href = newHref;
});

这也处理了链接上不存在先前查询字符串并附加 ? 而不是 & 的情况，但如果出现这种情况，则可以省略该部分不会发生在您的应用中。