обновить текущий URL-адрес ajax GET запрос url jquery

Question

Я работаю над фильтрами на своем веб-сайте. Пользователь может одновременно выбирать несколько фильтров, и результаты будут соответствовать точно так же, как и на любом веб-сайте электронной коммерции. Я могу получить результаты с помощью ajax GET-запроса. Я использую следующую функцию каждый раз, когда изменяется какой-либо фильтр.

function filterCandidates() { 
var edu = []; 
var salary_exp = []; 
var jobtype = []; 
var url = window.location.href; 
//var tech = []; 
var gender = []; 
var sorting = $('#sorting').val(); 

$('input.edu:checked').each(function() { 
    var ed = $(this).val(); 
    edu.push(ed); 
}); 
$('input.sldr').each(function() { 
    var t_sc = $(this).val(); 
    salary_exp.push(t_sc); 
}); 
$('input.gndr:checked').each(function() { 
    var c_sc = $(this).val(); 
    gender.push(c_sc); 
}); 
$('input.jtype:checked').each(function() { 
    var jt = $(this).val(); 
    jobtype.push(jt); 
}); 

var edu_str = ''; 
if (edu.length > 0) { 
    edu_str = '&edu[]=' + edu; 
} 
var gender_str = ''; 
if (gender.length > 0) { 
    gender_str = '&gender[]=' + gender; 
} 
var jobtype_str = jobtype.length > 0 ? '&jobtype[]=' + jobtype : ''; 
var salaryexp_str = salary_exp.length > 0 ? '&salary[]=' + salary_exp : ''; 
var sort_str = sorting != '' && typeof sorting !== 'undefined' ? '&sort=' + sorting : ''; 

var addition_url = edu_str + gender_str + +salaryexp_str + jobtype_str + sort_str; 
var data = {}; 

$('#loading-img').show(); 
$.ajax({ 
    url: url + addition_url, 
    data: data, 
    cache: false, 
    type: 'get', 
    beforeSend: function (xhr) { 
     var token = $('meta[name="csrf_token"]').attr('content'); 

     if (token) { 
      return xhr.setRequestHeader('X-CSRF-TOKEN', token); 
     } 
    }, 
    success: function (data) { 
     if (data === 'No Results Found') { 
      $('#search_res').hide(); 
      $("#no_candidate").removeClass('hidden'); 
     } else { 
      $('#search_res').show().html(data); 
      $("#no_candidate").addClass('hidden'); 
     } 
     $('#loading-img').hide(); 
     window.scrollTo(0, 0); 
     //$('#search_res').load(document.URL+" #search_res"); 
    }, 
    error: function (xhr, status, error) { 
     var err = eval("(" + xhr.responseText + ")"); 
     alert(err.Message); 
    } 

}); 

}

Я хочу знать, как сайты электронной коммерции передать параметр в URL на фильтре (флажок или выберите) change.I'll очень признателен за любую помощь.

Answer 1

Вы хотите добавить все значения фильтра в текущий отображаемый URL-адрес в адресной строке браузера?

Если так, вы должны сохранить каждое изменение фильтра по адресу window.location.hash. Например window.location.hash = 'gender [] = male & edu [] = foo'; добавит www.example.com # gender [] = мужчина & edu [] = foo на ваш url.

Затем перед выполнением запроса ajax вы можете добавить значение window.location.hash в URL-адрес ajax и запросить отфильтрованные данные.

Таким образом пользователи интернет-магазина могут разглашать URL-адрес www.example.com # gender [] = male & edu [] = foo, и вы должны проверить, есть ли уже определенный фильтр в URL-адресе, когда кто-то открывает веб-сайт. И если это так, вы должны немедленно выполнить вызов ajax.