Question

我正在Flipkart这样的网站中使用产品过滤。而且我不想在过滤数据后重新加载页面。这是我的用于过滤数据的jquery代码。在所有过滤器中使用过滤器类。给一些建议。

$('.filter').click(function() {    

    var typef = '';    
    var currentURL = location.protocol + '//' + location.host + location.pathname;    
    if (window.location.href.indexOf("search") > -1) {
        var searchParams = new URLSearchParams(window.location.search);
        var aquery = searchParams.get('query');    
        typef = 'search';    
    }    
    var brands = [];    
    var colors = [];    
    var price = [];    
    if ($(this).is(":checked")) {    
        $("input:checkbox[name=brand_check]:checked").each(function() {    
            brands.push($(this).val());    
        });    
        $("input:checkbox[name=color_check]:checked").each(function() {    
            colors.push($(this).val());    
        });    
        $("input:radio[name=price_check]:checked").each(function() {    
            price.push($(this).val());    
        });    
        var filterdata = {    
            brands: jQuery.unique(brands),    
            color: jQuery.unique(colors),    
            price: jQuery.unique(price)    
        };    
        var filteruri = jQuery.param(filterdata);    
        if (typef == 'search' && typeof aquery !== "undefined" && aquery !== '') {    
            window.location.replace(currentURL + '?query=' + encodeURIComponent(aquery) + '&f=' + encodeURIComponent(filteruri));    
        } else {    
            window.location.replace(currentURL + '?f=' + encodeURIComponent(filteruri));    
        }    
    } else {     
        $('input:checkbox[value="' + $(this).val() + '"]').attr('checked', false);    
        $("input:checkbox[name=brand_check]:checked").each(function() {
            brands.push($(this).val());    
        });    
        $("input:checkbox[name=color_check]:checked").each(function() {
            colors.push($(this).val());    
        });    
        $("input:radio[name=price_check]:checked").each(function() {
            price.push($(this).val());    
        });    
        var filterdata = {    
            brands: jQuery.unique(brands),    
            color: jQuery.unique(colors),    
            price: jQuery.unique(price)    
        };    
        var filteruri = jQuery.param(filterdata);    
        if (typef == 'search' && typeof aquery !== "undefined" && aquery !== '') {    
            if (filteruri.length > 0) {    
                window.location.replace(currentURL + '?query=' + encodeURIComponent(aquery) + '&f=' + encodeURIComponent(filteruri));    
            } else {    
                window.location.replace(currentURL + '?query=' + encodeURIComponent(aquery));        
            }        
        } else {    
            if (filteruri.length > 0) {    
                window.location.replace(currentURL + '?f=' + encodeURIComponent(filteruri));    
            } else {    
                window.location.replace(currentURL);    
            }    
        }    
    }    

});

Answer 1

如果我理解正确，那么您想更改URL而无需重新加载页面。阅读有关操纵浏览器历史记录（https://developer.mozilla.org/en-US/docs/Web/API/History_API）的一些信息，尤其是：pushState。

根据您的情况，您可以使用 window.history.pushState （https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method）。

代替 window.location.replace ，您可以编写如下内容：

window.history.pushState({ page: filteruri }, 'Page title', currentURL + '?somethingnew');

什么可以代替window.location.replace来避免页面重新加载？

1 个答案: