window.location.href 改为追加或重定向

Question

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

从调试中我可以看到我要访问的 url 与我想要的完全一样，但是当我执行 window.location.href（我也尝试过 replace() 等）时，它只是附加了新参数到当前 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()方法追加parameters

$("#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 属性。

Answer 2

使用 window.location = url 代替 window.location.href

  console.log(url);
  window.location = url;

Answer 3

希望对您有所帮助。

window.history.pushState("http://example.ca", "Sample Title", "/example/path.html");