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

使用 window.location = url 而不是 window.location.href

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

Answer 2

希望这对你有帮助。

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

Answer 3

使用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>

并且也不要在 value 中使用 params，您可以将一个选项用作data属性。