2010-01-12 22 views
8

Ho un menu a discesa di selezione con l'ID mappato ai valori. Sull'evento onChange voglio reindirizzare allo stesso url ma con 'id = value' aggiunto a querystring.Come usare jquery per manipolare la querystring

Come faccio a controllare che questa opzione 'id' non sia già nella querystring (non voglio più valori) e sostituirla/aggiungerla se necessario.

Come si verifica se '?' è già in querystring e si aggiunge all'URL se non lo è.

C'è un modo semplice con jquery per fare questo?

Deve fare qualcosa di simile sotto il cofano per le chiamate $().ajax(url, {options}). Speravo di poter fare solo $().redirect(url, { id : $(this).val() }) o somesuch.

Grazie in anticipo.

Nota: in questa pagina è possibile che siano passate o meno alcune opzioni di query diverse (che impostano i valori predefiniti su altre opzioni del modulo), pertanto la sostituzione dell'intera query querys non è un'opzione.

<html> 
<head><script type="text/javascript" src="/jquery-1.3.2.min.js"></script></head> 
<body> 
    <script> 
    $(function(){                                   
     $('#selector').change(function(){                             
      // problem if 'id' option already exists 
      var url = location.href + '?;id=' + $(this).val();                        
      location.assign(url); 
     });                                    
    });                                     
    </script> 

    <a href="#" onclick="location.assign(location.pathname)">reset</a>                      
    <form>                                      
    <select id='selector' name='id'>                              
     <option value='1'>one</option>                              
     <option value='2'>two</option>                              
     <option value='3'>three</option>                             
    </select>                                    
    </form> 
</body> 
</html> 
+0

possibile duplicato del [querystring codifica di un oggetto JavaScript] (http: // StackOverflow. it/questions/1714786/querystring-encoding-of-a-javascript-object) –

risposta

10

ho finito per andare con una partita RegExp per sovrascrivere le opzioni. jQuery.param prende un hash e lo serializza su query_string ma non fornisce l'inverso (spezzando una stringa_stringa).

// put function into jQuery namespace 
jQuery.redirect = function(url, params) { 

    url = url || window.location.href || ''; 
    url = url.match(/\?/) ? url : url + '?'; 

    for (var key in params) { 
     var re = RegExp(';?' + key + '=?[^&;]*', 'g'); 
     url = url.replace(re, ''); 
     url += ';' + key + '=' + params[key]; 
    } 
    // cleanup url 
    url = url.replace(/[;&]$/, ''); 
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';'); 
    // $(location).attr('href', url); 
    window.location.replace(url); 
}; 

Poi nel html

$('#selector').change(function(){ 
    $.redirect(location.href, { id : $(this).val() }) 
}) 

Grazie a tutti che hanno risposto.

1

provare ad utilizzare la funzione split:

var url = location.href.split('?')[0] + '?;id=' + $(this).val(); 

split restituisce un elenco costituito dalla stringa di dividersi dalla stringa (come '?'), Con quella stringa rimosso.

2

Questo funziona come un fascino:

jQuery.redirect = function(url) { 
    window.location.replace(url); 
}; 
$("#selector").change(function() { 
    var href = window.location.href.substring(0, window.location.href.indexOf('?')); 
    $.redirect(href + '?id=' + $(this).val()); 
}); 
6

impostazione window.location.search aggiornerà stringa di query dell'URL (e sovrascrivere un valore se esce già)

$('#selector').change(function(){ 
    window.location.search = "id=" + $(this).val(); 
}); 
+0

Non funziona per me. – crizCraig

+0

Quale browser? Che aspetto hanno il tuo HTML e JS? –

+0

Mi spiace, stavo scambiando '.search' per un parametro querystring 'search'. In realtà 'ricerca' indica l'intera querystring nell'oggetto di posizione del DOM. – crizCraig

0

Sospetto che la presunta soluzione non funzioni con nomi di variabili specifici. In particolare la linea:

RegExp(';?' + key + '=?[^&;]*', 'g') 

Se chiave è una sequenza di caratteri presenti altrove nella querystring, quell'occorrenza verrà erroneamente sostituito anche (provare una lettera, ad esempio 'a'). Questo perché la regex lascia aperti i limiti delle stringhe (il comando ';' e il carattere '=' sono entrambi facoltativi). Forse l'epxression meglio essere qualcosa di simile:

RegExp('[;&]' + key + '=?[^&;]*', 'g') 

Anche se non ho ancora testato.

+0

Bella scoperta! Ho appena controllato il mio codice e sto passando in 'client_id = 12; project_id = 45; 'ecc. ma vedo quanto facilmente si romperà con' id = ' Penso che andrò con qualcosa come ' RegExp ('[; &]? \ b' ...) ' Verificherà quando andare al lavoro. Grazie. – CoffeeMonster

6

in base alla risposta del CoffeeMonster:

C'è un problema quando la posizione.href contiene una parte hash:

www.example.com#hash diventa www.example.com#hash?id=whatever che risulta in ?id=whatever non interpretato dal server.

è stato risolto rimuovendo la parte hash della url: url.split("#")[0];

// put function into jQuery namespace 
jQuery.redirect = function(url, params) { 

    url = url || window.location.href || ''; 
    url = url.split("#")[0]; 
    url = url.match(/\?/) ? url : url + '?'; 

    for (var key in params) { 
     var re = RegExp(';?' + key + '=?[^&;]*', 'g'); 
     url = url.replace(re, ''); 
     url += ';' + key + '=' + params[key]; 
    } 
    // cleanup url 
    url = url.replace(/[;&]$/, ''); 
    url = url.replace(/\?[;&]/, '?'); 
    url = url.replace(/[;&]{2}/g, ';'); 
    // $(location).attr('href', url); 
    window.location.replace(url); 
}; 

Ora www.example.com#hash diventa www.example.com?id=whatever

+1

Ora, per i punti bonus, ricollega l'hash alla fine dell'URL. :-) –

Problemi correlati