So ändern Sie die URL-Abfragezeichenfolge ohne erneutes Laden

Question

Ich verwende die folgende Methode, um den Abfrage-URL-Parameter zu ändern, der der Eingabe/Dropdown-Liste für ein Formular entspricht. Zur Zeit wird window.location.href dazu führen, dass eine Seite bei Änderung neu geladen wird. Wie kann ich stattdessen history.replaceState() integrieren, um die URL ohne Neuladen zu ändern?

REGEX Funktion

function replaceQueryString(url, param, value) { 
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i"); 
    if (url.match(re)) 
     return url.replace(re, '$1' + param + "=" + value + '$2'); 
    else 
     return url + '&' + param + "=" + value; 
} 

Bei der Eingabe ändern

$("#input_field").on('change', function(e) { 
    window.location.href = replaceQueryString(window.location.href, 'input_value', $(this).val()); 
}); 

aktualisieren

ich jetzt geschafft haben, die URL zu dem Wert domain.com/2 auf Änderung zu aktualisieren, aber wie kann ich laufen? es durch die replaceQueryString Funktion es in domain.com/?input_value=2

$("#input_field").on('change', function(e) { 
    window.history.replaceState("#input_field", "input_value", $(this).val()); 
}); 

Answer 1

Pass replaceQueryString() Funktion dritten Parameter von .replaceState()

window.history.replaceState({} 
, "input_value" 
, replaceQueryString(location.href, "input_value", $(this).val()));