2010-01-12 11 views
8

Ich habe eine Auswahl Drop-Down mit ID auf Werte zugeordnet. Auf dem OnChange-Ereignis möchte ich auf die gleiche URL aber mit "ID = Wert" an die Querystring angehängt werden.Wie benutze ich jquery, um die Querystring zu manipulieren

Wie überprüfe ich, ob diese ID-Option nicht bereits in der Querystring (ich will nicht mehrere Werte) und Ersetzen/Append wie nötig.

Wie überprüfe ich, ob '?' ist bereits in der Querystring und an die URL anhängen, wenn es nicht ist.

Gibt es einen einfachen Weg mit jquery, dies zu tun?

Es muss etwas ähnliches unter der Haube für $().ajax(url, {options}) Aufrufe. Ich hatte gehofft, ich könnte einfach tun $().redirect(url, { id : $(this).val() }) oder Somesuch.

Vielen Dank im Voraus.

Hinweis: Diese Seite kann einige verschiedene Abfrageoptionen enthalten (oder nicht) (die Standardwerte für andere Formularoptionen festlegen). Daher ist das Ersetzen der gesamten Abfragezeichenfolge keine Option.

<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

möglich Duplikat [Abfragezeichenkodierung eines Javascript-Objekt] (http: // Stackoverflow. com/questions/1714786/querystring-encoding-of-a-javascript-objekt) –

Antwort

10

ich mit einem RegExp Spiel endete gehen um die Optionen zu überschreiben. jQuery.param nimmt einen Hash und serialisiert ihn in eine query_string , aber es bietet nicht die inverse (Aufbrechen einer Query_string).

// 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); 
}; 

dann im html

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

Vielen Dank an alle, die geantwortet haben.

1

Probieren Sie die Split-Funktion:

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

split gibt eine Liste aus der Zeichenfolge aus der Zeichenfolge aufgeteilt (wie '?'), Mit dem entfernt String.

2

Dies wirkt wie ein Zauber:

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

window.location.search Einstellung wird die Query-String-URL aktualisieren (und Wert überschreiben, wenn sie bereits beendet)

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

Funktioniert nicht für mich. – crizCraig

+0

Welcher Browser? Wie sieht dein HTML und JS aus? –

+0

Sorry, ich habe '.search' für einen 'search'-Querystring-Parameter verwechselt. Really 'search' bedeutet die gesamte Querystring im Location-Objekt des DOM. – crizCraig

0

Ich vermute, die angebliche Lösung arbeitet nicht mit bestimmten Variablennamen. Vor allem die Linie:

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

Wenn die Taste eine Zeichensequenz, die an anderer Stelle innerhalb der Abfragezeichen ist, dass das Auftreten fälschlicherweise auch (versuchen einen Buchstaben, beispielsweise ‚a‘) ersetzt werden. Dies liegt daran, dass die Regex die String-Grenzen offen lässt (führende ';' und nachfolgende '=' sind beide optional). Vielleicht ist die epxression besser etwas wie:

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

Obwohl ich es noch nicht getestet habe.

+0

Schöner Bug finden! Habe gerade meinen Code überprüft und ich gebe 'client_id = 12; project_id = 45; 'usw. Aber ich sehe, wie leicht es mit nur brechen würde' id = ' Ich denke, ich werde mit etwas gehen wie ' RegExp ('[; &]? \ b' ...) ' Wird testen, wenn ich an die Arbeit gehen. Vielen Dank. – CoffeeMonster

6

Basierend auf CoffeeMonster Antwort:

Es ist ein Problem, wenn die Lage.href enthält einen Hash-Teil:

www.example.com#hash wird www.example.com#hash?id=whatever, was dazu führt, dass ?id=whatever nicht vom Server interpretiert wird.

es behoben, durch den Hash-Teil der URL zu entfernen: 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); 
}; 

Jetzt www.example.com#hash wird www.example.com?id=whatever

+1

Jetzt, für Bonuspunkte, den Hash erneut an das Ende der URL anhängen. :-) –

Verwandte Themen