dołącz do adresu URL i odśwież stronę

Chcę napisać fragment javascript, który doda parametr do bieżącego adresu URL, a następnie odświeży stronę - jak mogę to zrobić?

to powinno działać (nie testowane!)

var url = window.location.href;    
if (url.indexOf('?') > -1){
   url += '&param=1'
}else{
   url += '?param=1'
}
window.location.href = url;

Krótsza niż zaakceptowana odpowiedź, robiąc to samo, ale zachowując prostotę:

window.location.search += '&param=42';

Nie musimy zmieniać całego adresu URL, tylko ciąg zapytania, znany jako atrybut wyszukiwania lokalizacji.

Podczas przypisywania wartości do atrybutu wyszukiwania, znak zapytania jest automatycznie wstawiany przez przeglądarkę i strona jest ponownie ładowana.

Większość odpowiedzi sugeruje, że należy dołączyć parametr (y) do adresu URL, coś w rodzaju poniższego fragmentu lub podobnej odmiany:

location.href = location.href + "&parameter=" + value;

W większości przypadków będzie to działać całkiem dobrze.

jednak

Moim zdaniem nie jest to właściwy sposób dołączania parametru do adresu URL.

Ponieważ sugerowane podejście nie sprawdza, czy parametr jest już ustawiony w adresie URL, jeśli nie będziesz ostrożny, możesz otrzymać bardzo długi adres URL z tym samym parametrem powtórzonym wiele razy. to znaczy:

https://stackoverflow.com/?&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1

w tym momencie zaczynają się problemy. Sugerowane podejście może i spowoduje utworzenie bardzo długiego adresu URL po wielu odświeżeniach strony, przez co adres URL będzie nieprawidłowy. Kliknij to łącze, aby uzyskać więcej informacji na temat długich adresów URL. Jaka jest maksymalna długość adresu URL w różnych przeglądarkach?

Oto moje sugerowane podejście:

function URL_add_parameter(url, param, value){
    var hash       = {};
    var parser     = document.createElement('a');

    parser.href    = url;

    var parameters = parser.search.split(/\?|&/);

    for(var i=0; i < parameters.length; i++) {
        if(!parameters[i])
            continue;

        var ary      = parameters[i].split('=');
        hash[ary[0]] = ary[1];
    }

    hash[param] = value;

    var list = [];  
    Object.keys(hash).forEach(function (key) {
        list.push(key + '=' + hash[key]);
    });

    parser.search = '?' + list.join('&');
    return parser.href;
}

Dzięki tej funkcji wystarczy wykonać następujące czynności:

location.href = URL_add_parameter(location.href, 'param', 'value');

location.href = location.href + "&parameter=" + value;

function gotoItem( item ){
    var url = window.location.href;
    var separator = (url.indexOf('?') > -1) ? "&" : "?";
    var qs = "item=" + encodeURIComponent(item);
    window.location.href = url + separator + qs;
}

Więcej kompatybilnej wersji

function gotoItem( item ){
    var url = window.location.href;    
    url += (url.indexOf('?') > -1)?"&":"?" + "item=" + encodeURIComponent(item);
    window.location.href = url;
}

Sprawdź poniższy kod:

/*Get current URL*/    
var _url = location.href; 
/*Check if the url already contains ?, if yes append the parameter, else add the parameter*/
_url = ( _url.indexOf('?') !== -1 ) ? _url+'&param='+value : _url+'?param='+value;
/*reload the page */
window.location.href = _url;

Jedna mała poprawka błędu dla przemyślanej odpowiedzi @ yeyo powyżej.

Zmiana:

var parameters = parser.search.split(/\?|&/);

Do:

var parameters = parser.search.split(/\?|&/);

Spróbuj tego

var url = ApiUrl(`/customers`);
  if(data){
   url += '?search='+data; 
  }
  else
  { 
      url +=  `?page=${page}&per_page=${perpage}`;
  }
  console.log(url);

Również:

window.location.href += (window.location.href.indexOf('?') > -1 ? '&' : '?') + 'param=1'

Tylko jedna linijka odpowiedzi Shlomi do wykorzystania w bookmarkletach

Ta linia kodu JS pobiera link bez parametrów (tj. Przed '?'), a następnie dodaje do niego parametry.

window.location.href = (window.location.href.split('?')[0]) + "?p1=ABC&p2=XYZ";

Powyższy wiersz kodu zawiera dwa parametry p1i p2odpowiednie wartości 'ABC'i 'XYZ'(dla lepszego zrozumienia).

Jeśli tworzysz dla nowoczesnej przeglądarki , zamiast samodzielnie analizować parametry adresu URL - możesz skorzystać z wbudowanych URLfunkcji, aby zrobić to za Ciebie w następujący sposób:

const parser = new URL(url || window.location);
parser.searchParams.set(key, value);
window.location = parser.href;