单击时将 GET 参数注入按钮的目标 URL

Question

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

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

点击按钮后，应该在 URL 中添加以下 GET 参数，然后提交按钮：

mySessionVar=1

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

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

为什么我要注射它？

我正在与 fluid 合作。据我所知，无法使用 JavaScript 操纵流体标签。但是，我需要向流体标签 arguments 属性添加 sessionStorage 项目值。

我的流体代码：

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

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

Answer 2

以下代码片段足以将您的 mySessionVar=1 参数添加到 href 属性：

$('.myButton').on('click', function(e) {
    $(this).attr('href', $(this).attr('href') + "&mySessionVar="+ sessionStorage.getItem('myVar');
});

您不必阻止默认设置，因为您的点击处理函数在默认事件处理程序之前被调用（粗略地说：读取 href 属性并加载它）。

Answer 3

您可以使用 jquery 中的 .serialize 函数，这是一个简单而现代的函数，可以将所有选定的 buttons/filters 放入 url参数格式与 amberson 简单。我无法解释得比 Jquery 网站上所说的更清楚了。请参阅下面的 link 了解如何使用该功能。 https://api.jquery.com/serialize/#serialize

单击时将 GET 参数注入按钮的目标 URL

Inject GET parameter to target URL of a button, on click

javascript

php

jquery

fluid