Wie bekomme ich GET- und POST-Variablen mit JQuery?

95

Wie erhalte ich einfach GETund POSTWerte mit JQuery?

Was ich tun möchte, ist ungefähr so:

$('#container-1 > ul').tabs().tabs('select', $_GET('selectedTabIndex'));
Edward Tanguay
quelle

Antworten:

170

Für GET-Parameter können Sie sie abrufen von document.location.search:

var $_GET = {};

document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    $_GET[decode(arguments[1])] = decode(arguments[2]);
});

document.write($_GET["test"]);

Für POST-Parameter können Sie das $_POSTObjekt im JSON-Format in ein <script>Tag serialisieren :

<script type="text/javascript">
var $_POST = <?php echo json_encode($_POST); ?>;

document.write($_POST["test"]);
</script>

Während Sie gerade dabei sind (Dinge auf der Serverseite erledigen), können Sie die GET-Parameter auch auf PHP erfassen:

var $_GET = <?php echo json_encode($_GET); ?>;

Hinweis: Sie benötigen PHP Version 5 oder höher, um die integrierte json_encodeFunktion verwenden zu können.


Update: Hier ist eine allgemeinere Implementierung:

function getQueryParams(qs) {
    qs = qs.split("+").join(" ");
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])]
            = decodeURIComponent(tokens[2]);
    }

    return params;
}

var $_GET = getQueryParams(document.location.search);
Ates Goral
quelle
3
Ihre Extraktionsmethode berücksichtigt keine Argumente ohne Wert ("? Foo & bar = baz" => {foo: "", bar: "baz"}).
Gumbo
1
Schöner Fang Gumbo! Das = in der Regex sollte optional gemacht werden: ... snip ... (?: = ([^ &] *))? &?) / G
Ates Goral
1. Ihr erstes GET-Beispiel scheint für mich nicht zu funktionieren. 2. In Ihrem Update enthält Ihr Funktionsname einen Tippfehler
Jake Wilson
Haben Sie versucht, das in Safari oder Chrom auszuführen? Es erstellt eine Endlosschleife und stürzt den Browser ab. Versuchen Sie es mit etwas so Einfachem wie "? P = 2"
MrColes
@ MrColes: Huch. Es ist eine Weile her, seit ich das geschrieben habe. Seitdem habe ich festgestellt, dass Webkit den internen Positionszähler des RegExp-Objekts nicht aktualisiert, wenn es als Literal verwendet wird. Ich werde meine Antwort mit dem Fix aktualisieren.
Ates Goral
16

Es gibt ein Plugin für jQuery, mit dem GET-Parameter namens .getUrlParams abgerufen werden können

Für POST besteht die einzige Lösung darin, den POST mithilfe von PHP in eine Javascript-Variable zu übertragen, wie von Moran vorgeschlagen.

Leandro Ardissone
quelle
6

Warum nicht gutes altes PHP verwenden? Nehmen wir zum Beispiel an, wir erhalten einen GET-Parameter 'target':

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}
Tony Gil
quelle
7
Da dies eine serverseitige Lösung ist und die Frage die clientseitige / javascript / jQuery-Seite betraf.
Hrvoje Kusulja
@hkusulja Beleidigung der Verletzung hinzufügen: Auch wenn Sie es bestätigen, kann ich immer noch nicht sehen, dass die Frage ausschließlich serverseitig ist. Ich fühle mich dick wie ein Werkzeug ...
Tony Gil
1
Dieses Skript ist abscheulich. Verwenden Sie diese Option, wenn Ihre Website gehackt werden soll. Vom Benutzer eingegebene Variablen immer entkommen !! Geben Sie $ _GET NICHT direkt aus.
Charj
3

Bei jeder serverseitigen Sprache müssen Sie die POST-Variablen in Javascript ausgeben.

.NETZ

var my_post_variable = '<%= Request("post_variable") %>';

Achten Sie nur auf leere Werte. Wenn die Variable, die Sie ausgeben möchten, tatsächlich leer ist, wird ein Javascript-Syntaxfehler angezeigt. Wenn Sie wissen, dass es sich um eine Zeichenfolge handelt, sollten Sie sie in Anführungszeichen setzen. Wenn es sich um eine Ganzzahl handelt, möchten Sie möglicherweise testen, ob sie tatsächlich vorhanden ist, bevor Sie die Zeile in Javascript schreiben.

Gefährdete Masse
quelle
1
Sie haben jedoch nicht immer Zugriff auf serverseitige Sprachen. Zum Beispiel GitHub-Seiten ...
Adam B
2

Sie können das Query String Object Plugin für jQuery ausprobieren .

Burak Erdem
quelle
2

Hier finden Sie Informationen zum Sammeln aller GETVariablen in einem globalen Objekt, einer über mehrere Jahre optimierten Routine. Seit dem Aufstieg von jQuery erscheint es nun angebracht, sie in jQuery selbst zu speichern. Ich erkundige mich bei John nach einer möglichen Kernimplementierung.

jQuery.extend({
    'Q' : window.location.search.length <= 1 ? {}
        : function(a){
            var i = a.length, 
                r = /%25/g,  // Ensure '%' is properly represented 
                h = {};      // (Safari auto-encodes '%', Firefox 1.5 does not)
            while(i--) {
                var p = a[i].split('=');
                h[ p[0] ] = r.test( p[1] ) ? decodeURIComponent( p[1] ) : p[1];
            }
            return h;
        }(window.location.search.substr(1).split('&'))
});

Anwendungsbeispiel:

switch ($.Q.event) {
    case 'new' :
        // http://www.site.com/?event=new
        $('#NewItemButton').trigger('click');
        break;
    default :
}

Hoffe das hilft. ;)

Matt Gardner
quelle
1

Wenn Ihr $ _GET mehrdimensional ist, möchten Sie möglicherweise Folgendes:

var $_GET = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
            return decodeURIComponent(s.split("+").join(" "));
    }

    //handling for multidimensional arrays
    if(decode(arguments[1]).indexOf("[]") > 0){
        var newName = decode(arguments[1]).substring(0, decode(arguments[1]).length - 2);
        if(typeof $_GET[newName] == 'undefined'){
            $_GET[newName] = new Array();
        }
        $_GET[newName].push(decode(arguments[2]));
    }else{
        $_GET[decode(arguments[1])] = decode(arguments[2]);
    }
});
WoodyNaDobhar
quelle
1

Einfach, aber dennoch nützlich, um Variablen / Werte von der URL abzurufen:

function getUrlVars() {
    var vars = [], hash, hashes = null;
    if (window.location.href.indexOf("?") && window.location.href.indexOf("&")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    } else if (window.location.href.indexOf("?")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
    }
    if (hashes != null) {
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }
    }
    return vars;
}

Ich habe es irgendwo im Internet gefunden, nur ein paar Fehler behoben

Lukas Liesis
quelle
1

Verwenden Sie folgende Funktion:

var splitUrl = function() {
    var vars = [], hash;
    var url = document.URL.split('?')[0];
    var p = document.URL.split('?')[1];
    if(p != undefined){
        p = p.split('&');
        for(var i = 0; i < p.length; i++){
            hash = p[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
    }
    vars['url'] = url;
    return vars;
};

und Zugriff auf Variablen als vars['index']wo 'index'ist der Name der get-Variablen.

ashsam786
quelle
Dieser Code schlägt für UTLs wie fehl http://foo.com/?a=b#bar. Es denkt, b#barist der Wert für a.
MM
1

Halte es einfach

Ersetzen Sie VARIABLE_KEY durch den Schlüssel der Variablen, um ihren Wert zu erhalten

 var get_value = window.location.href.match(/(?<=VARIABLE_KEY=)(.*?)[^&]+/)[0]; 
Kareem
quelle
0

Nur zur Veranschaulichung, ich wollte die Antwort auf diese Frage wissen, also habe ich eine PHP-Methode verwendet:

<script>
var jGets = new Array ();
<?
if(isset($_GET)) {
    foreach($_GET as $key => $val)
        echo "jGets[\"$key\"]=\"$val\";\n";
}
?>
</script>

Auf diese Weise können alle meine Javascript / JQuerys, die danach ausgeführt werden, auf alles in den jGets zugreifen. Es ist eine schöne, elegante Lösung, die ich fühle.

Chud37
quelle
0

Mein Ansatz:

var urlParams;
(window.onpopstate = function () {
var match,
      pl     = /\+/g,  Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
      decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
       query  = window.location.search.substring(1);
   urlParams = {};
   while (match = search.exec(query))
    urlParams[decode(match[1])] = decode(match[2]);
})();
otaxige_aol
quelle