что можно использовать вместо window.location.replace, чтобы избежать перезагрузки страницы?

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');