javascript - window.location.href 改为附加或重定向

Question

我试图将浏览器重定向到当前页面，但当用户从下拉列表中选择选项时使用新参数。

通过调试，我可以看到我尝试访问的网址与我想要的完全一样，但是当我执行 window.location.href (我也尝试过替换()等)时，它只是附加新参数到当前 url 而不是替换它。

我已经尝试了两天来解决这个问题，这让我发疯，我已经尝试了我在网上找到的所有解决方案，但到目前为止没有任何效果。希望有人能帮助我。

我试图实现的示例地址和脚本创建的地址是'http://localhost/wordpress/showroom/?page=2&orderby=price&order=asc '

但我得到 ' http://localhost/wordpress/showroom/?page=2&orderby=price&order=asc&orderby=price&order=dsc '

尽管脚本生成了“http://localhost/wordpress/showroom/?page=2&orderby=price&order=dsc”事件'

这是我的选择

<select id="post-sort">
 <option value="orderby=price&order=desc">Price - Highest First</option>
 <option value="orderby=price&order=asc">Price - Lowest First</option>
 <option value="orderby=year&order=desc">Age - Newest First</option>
 <option value="orderby=year&order=asc">Age - Lowest First</option>
</select>

这是我的 JavaScript 函数

$(document).ready(function () {
    $("#post-sort").on('change', function (event) {

        var sortValue = this.value;
        var url = JSON.parse(JSON.stringify(window.location.href));

        //get param string
        var urlParamsSection = url.split('?')[1];

        //If has params
        if (urlParamsSection) {
            //Split params
            var urlParams = urlParamsSection.split('&');
            //Loop all params
            urlParams.forEach(urlParam => {
                //if param contains order var => remove
                if (urlParam.indexOf('order') > -1) {
                    url.replace('&' + urlParam, '');
                }
            });

            url += '&' + sortValue;
        } else {
            url += '?' + sortValue;
        }

        console.log(url);
        window.location.href = url;
        return false;
    });
});

Answer 1

使用URL 对象，并使用 params.set() 附加参数的方法

$("#post-sort").on('change', function(e) {

  let url = new URL('https://stackoverflow.com'); // new URL(window.location.href)
  let params = url.searchParams;
  let orderby = $('option:selected', this).data('orderby');
  let order = $('option:selected', this).data('order');

  params.set('orderby', orderby);
  params.set('order', order);

  console.log(url);
  //window.location.href = url;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="post-sort">
  <option data-orderby="price" data-order="desc" value="1">Price - Highest First</option>
  <option data-orderby="price" data-order="asc" value="2">Price - Lowest First</option>
  <option data-orderby="year" data-order="desc" value="3">Age - Newest First</option>
  <option data-orderby="year" data-order="asc" value="4">Age - Lowest First</option>
</select>

并且也不要在值中使用参数，这是一个可以用作 data 属性的选项。