2012-03-08 16 views
13

Powiedzmy mam url takich jak:aktualizacja istniejących URL wartości kwerendy z jQuery

http://www.example.com/hello.png?w=100&h=100&bg=white 

Co chciałbym zrobić, to zmiana wartości ciągu kwerendy W i H, ale pozostawić bg kwerendy nienaruszone na przykład:

http://www.example.com/hello.png?w=200&h=200&bg=white 

Więc co to najszybszy najskuteczniejszym sposobem odczytać wartości kwerendy (i mogą być dowolny zbiór wartości kwerendy, nie tylko w, h, i BG), zaktualizuj kilka lub żaden z wartości i zwraca pełny adres URL z nowym zapytaniem?

Więc:

  1. uzyskać wartości każdej kwerendy kluczowego
  2. zaktualizować dowolną liczbę kluczy
  3. Rebuild url z nowymi wartościami
  4. Trzymaj wszystkie inne wartości, które weren” t updated
  5. Nie będzie mieć standardowego zestawu znanych kluczy, może zmienić na adres URL:

Odpowiedz

14

dostać ciągi znaków zapytania to way i używać $.param odbudować łańcuch zapytania

UPDATE:

To jest przykład, również sprawdzić fiddle:

function getQueryVariable(url, variable) { 
 
    \t var query = url.substring(1); 
 
    var vars = query.split('&'); 
 
    for (var i=0; i<vars.length; i++) { 
 
      var pair = vars[i].split('='); 
 
      if (pair[0] == variable) { 
 
      return pair[1]; 
 
      } 
 
    } 
 

 
    return false; 
 
    } 
 

 
    var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white'; 
 
     
 
    var w = getQueryVariable(url, 'w'); 
 
    var h = getQueryVariable(url, 'h'); 
 
    var bg = getQueryVariable(url, 'bg'); 
 

 
    // http://www.example.com/hello.png?w=200&h=200&bg=white 
 
    var params = { 'w':200, 'h':200, 'bg':bg }; 
 
    var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

można zmienić funkcja korzystania z bieżącego adresu URL:

function getQueryVariable(variable) { 
 
    \t var query = window.location.search.substring(1); 
 
    var vars = query.split('&'); 
 
    for (var i=0; i<vars.length; i++) { 
 
      var pair = vars[i].split('='); 
 
      if (pair[0] == variable) { 
 
      return pair[1]; 
 
      } 
 
    } 
 

 
    return false; 
 
    }

+0

Ta odpowiedź została oznaczona do usunięcia jako link tylko odpowiedź. Czy możesz zaktualizować odpowiedź, aby rozwiązać pytanie bez konieczności klikania linków przez czytelnika? – josliber

+0

co, jeśli musimy zaktualizować tylko niektóre zmienne i mamy wiele zmiennych w adresie URL, których nie będziemy aktualizować? –

3

Innym sposobem (niezależnie od jQuery lub innych bibliotek): https://github.com/Mikhus/jsurl

var u = new Url; 
// or 
var u = new Url('/some/path?foo=baz'); 
alert(u); 
u.query.foo = 'bar'; 
alert(u); 
+0

Ta biblioteka nazywa się teraz [domurl] (https://github.com/Mikhus/domurl). GitHub przekierowuje do właściwego repo, po prostu publikuj tutaj na wypadek, gdyby kiedykolwiek się zmienił. – vaindil

0

mój adres URL jest tak: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\\d+/; 
var url = window.location.href; 
url = url.toString(); 
var hrpid = $("#category :selected").val(); //new value to replace hpr_id 
var reExp = new RegExp("[\\?&]" + 'hpr_id' + "=([^&#]*)"), 
delimeter = reExp.exec(url)[0].charAt(0), 
newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid); 
window.location.href = newUrl; 

Jak to pracował dla mnie.

2
//update URL Parameter 
function updateURL(key,val){ 
    var url = window.location.href; 
    var reExp = new RegExp("[\?|\&]"+key + "=[0-9a-zA-Z\_\+\-\|\.\,\;]*"); 

    if(reExp.test(url)) { 
     // update 
     var reExp = new RegExp("[\?&]" + key + "=([^&#]*)"); 
     var delimiter = reExp.exec(url)[0].charAt(0); 
     url = url.replace(reExp, delimiter + key + "=" + val); 
    } else { 
     // add 
     var newParam = key + "=" + val; 
     if(!url.indexOf('?')){url += '?';} 

     if(url.indexOf('#') > -1){ 
      var urlparts = url.split('#'); 
      url = urlparts[0] + "&" + newParam + (urlparts[1] ? "#" +urlparts[1] : ''); 
     } else { 
      url += "&" + newParam; 
     } 
    } 
    window.history.pushState(null, document.title, url); 
} 
+0

Jest to wygodna funkcja, ale nie zadziała, jeśli adres URL nie będzie zawierał paramertów zapytania od początku, a hash '#'. Możesz to naprawić, zmieniając linię indexOf na '(url.indexOf ("? ') === -1) ' – leo

+0

(Będzie również wyprowadzać'? & Key = val', w przypadku tylko jednego parametru URL) – leo

0

Innym sposobem można to zrobić za pomocą jakiegoś prostego kodu reg ex Samuel Santos here tak:

/* 
* queryParameters -> handles the query string parameters 
* queryString -> the query string without the fist '?' character 
* re -> the regular expression 
* m -> holds the string matching the regular expression 
*/ 
var queryParameters = {}, queryString = location.search.substring(1), 
     re = /([^&=]+)=([^&]*)/g, m; 

// Creates a map with the query string parameters 
while (m = re.exec(queryString)) { 
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); 
} 

// Update w and h 
queryParameters['w'] = 200; 
queryParameters['h'] = 200; 

Teraz można utworzyć nowy adres URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname; 

// Build new Query String 
var params = $.param(queryParameters); 
if (params != '') { 
    url = url + '?' + params; 
} 

ALBO możesz po prostu użyć tych parametrów, aby przeglądarka przeładowała od razu:

location.search = params; 

czy cokolwiek chcesz z :)

0

Można zrobić coś takiego:

// If key exists updates the value 
if (location.href.indexOf('key=') > -1) { 
    location.href = location.href.replace('key=current_val', 'key=new_val'); 

// If not, append 
} else { 
    location.href = location.href + '&key=new_val'; 
} 

Pozdrowienia

Powiązane problemy