将 GET 请求值添加到 URL 的末尾答案

【问题标题】：Add GET request value to the end of a URL将 GET 请求值添加到 URL 的末尾
【发布时间】：2021-11-17 13:49:50
【问题描述】：

我在类别页面上有一个 WooCommerce 表单，允许用户选择要在页面上显示的产品数量。值是 24、48 和所有。选择其中一个选项时，表单会提交。我遇到的问题是 GET 值正在替换我的 URL 中的现有值，而我需要将值添加到 URL 的末尾。

例如，如果我的 URL 是：www.example.com/?s=cars&post_type=product&type_aws=true，并且我更新了表单，则 URL 变为：www.example.com/?show=48，而我需要将其添加到末尾，如下所示： www.example.com/?s=cars&post_type=product&type_aws=true&show=48

这是我的 HTML 表单：

<form class="woocommerce-results-per-page" method="get">
  <span>Show</span>
    <select class="autosubmit" name="show">
      <option value="48">48</option>
      <option value="24">24</option>
      <option value="-1">All</option>
    </select>
    <input type="hidden" name="orderby" value="rating">
</form>

这是我的 jQuery

$(function(){
    $(document).ready(function()
        {
             $( '.autosubmit' ).each( function()
           {
                $( this ).on( 'change' , null , function()
             {
                $( this ).parents( 'form' ).submit();
            });
        } );
    });

});

【问题讨论】：

您在哪里创建带有所有 GET 参数的 url？我认为您的示例中缺少一些 JS 代码。最简单的方法是在表单中添加隐藏字段以将它们保留在页面之间（不是最干净的方式）
带有所有 GET 参数的 URL 来自网站上的搜索。因此，如果我搜索“书籍”，它会将我带到一个带有 URL 中这些值的 WooCommerce 商店页面。
好吧，我就是这么想的。您不应该将所有 GET 参数从一个页面保留到另一个页面等。您应该搜索缓存或会话变量等替代方法。这可以帮助你，也许 wooCommerce stackoverflow.com/questions/40897349/… 有一个等价物
使用 session_start();然后将变量传递给您的会话 $_SESSION['myKey']; - 这是一篇有用的文章 - silvermapleweb.com/using-the-php-session-in-wordpress
注意会话变量漏洞security.stackexchange.com/questions/126825/…

标签： javascript jquery wordpress woocommerce get

【解决方案1】：

试试这个：

$(document).ready(function () {

        let select = $('.autosubmit');
        url = new URL(window.location.href);
        show = url.searchParams.get("show");
        if (show !== null) {
            select.find(`option[value="${show}"]`).prop('selected',true)
        }


        select.each(function () {
            $(this).on('change', null, function () {
                let url = window.location.search;
                let params = url.substring(1, url.length).split('&');
                let hidden_inputs = '';
                let form = $(this).parents('form');

                $.each(params, function (i, el) {
                    let param = el.split('=');
                    if (form.find(`select[name="${param[0]}"],input[name="${param[0]}"]`).length == 0) {
                        hidden_inputs += `<input type="hidden" name="${param[0]}" value="${param[1]}">`;
                    }
                });
                
                form.prepend(hidden_inputs).submit();
                
            });
        });
    });

【讨论】：