Wie bekomme ich "GET" -Anforderungsparameter in JavaScript?

Antworten:

183

Alle Daten sind unter verfügbar

window.location.search

Sie müssen die Zeichenfolge analysieren, z.

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

Rufen Sie einfach die Funktion mit dem Variablennamen GET als Parameter auf, z.

get('foo');

Diese Funktion gibt den Variablenwert oder undefiniert zurück, wenn die Variable keinen Wert hat oder nicht existiert

Rafael
quelle
@ Daniel Silveira: Ja, es könnte / sollte den Wert dekodieren (und den Namen kodieren). Werde meinen Beitrag in wenigen Augenblicken bearbeiten
Rafael
2
Beachten Sie, dass decodeURIComponent nicht / alle / mögliche URI-Escapezeichen decodiert. Insbesondere wird "+" nicht als "" dekodiert. (Ich habe vergessen, in welchem ​​Browser sich das befand. FF vielleicht?) Die Spezifikation verlangt, dass sie nur genau dekodieren, was encodeUIRComponent codiert, und es wird "" als "% 20" codiert, sodass "+" in Ruhe gelassen wird.
Jesse Rusak
Deshalb mag ich PHP
ymakux
2
@volocuga Im Gegensatz zu PHP ist der Umgang mit URLs in JavaScript ziemlich selten, daher haben sich Browser-Anbieter nie wirklich auf diese Funktionen konzentriert.
Rafael
genial beantwortet Rafael;)
Jalal Sordo
36

Sie könnten verwenden, jquery.urlich mochte das:

var xyz = jQuery.url.param("param_in_url");

Überprüfen Sie den Quellcode

Aktualisierte Quelle: https://github.com/allmarkedup/jQuery-URL-Parser

Kaos
quelle
1
Tolle Antwort, aber Ihr Link ist tot
Adam Casey
@ Adam es scheint so. Ich denke, dies ist die aktualisierte URL: github.com/allmarkedup/jQuery-URL-Parser Eine Google-Suche auf Mark Perkins jquery.url führte mich zu einem Update. Ich habe die Quelle, als ich diese Antwort gepostet habe, wenn Sie sie brauchen.
Kaos
3
Also ist ein Plugin erforderlich?
JohnK
var xyz = jQuery.url().param("param_in_url");ist die richtige Syntax, in jQuery.url()der die aktuelle Seiten-URL angegeben wird. Bitte nehmen Sie die Korrektur vor.
Ahmed Akhtar
13

Nur um meine zwei Cent einzubringen, wenn Sie ein Objekt mit allen Anforderungen haben möchten

function getRequests() {
    var s1 = location.search.substring(1, location.search.length).split('&'),
        r = {}, s2, i;
    for (i = 0; i < s1.length; i += 1) {
        s2 = s1[i].split('=');
        r[decodeURIComponent(s2[0]).toLowerCase()] = decodeURIComponent(s2[1]);
    }
    return r;
};

var QueryString = getRequests();

//if url === "index.html?test1=t1&test2=t2&test3=t3"
console.log(QueryString["test1"]); //logs t1
console.log(QueryString["test2"]); //logs t2
console.log(QueryString["test3"]); //logs t3

Beachten Sie, dass der Schlüssel für jeden get-Parameter auf Kleinbuchstaben gesetzt ist. Also habe ich eine Helferfunktion gemacht. Jetzt wird die Groß- und Kleinschreibung nicht mehr berücksichtigt.

function Request(name){
    return QueryString[name.toLowerCase()];
}
FabianCook
quelle
1
Mag diese Methode wirklich. +1
Ben Racicot
11

Versuchen Sie den folgenden Code. Er hilft Ihnen dabei, die GET-Parameter von der URL abzurufen. für mehr Details.

 var url_string = window.location.href; // www.test.com?filename=test
    var url = new URL(url_string);
    var paramValue = url.searchParams.get("filename");
    alert(paramValue)
VISHNU Radhakrishnan
quelle
funktioniert im Beispiel localhost nicht: 8080 / # /? access_token = 111 wegen location.hash-Teils. Wenn das Symbol '#' auftritt, ist location.search leer
Maksim Tikhonov
URL mit "#" Symbol wird nicht unterstützt, daher müssen wir das entfernen. Versuchen Sie Folgendes: var url_string = window.location.href; // www.test.com?filename=test var url = neue URL (url_string.replace ("# /", "")); var paramValue = url.searchParams.get ("access_token"); alert (paramValue)
VISHNU Radhakrishnan
5

Sie können die URL verwenden, um die GET-Variablen abzurufen. Insbesondere window.location.searchgibt alles nach (und einschließlich) dem '?'. Weitere Informationen zu window.location finden Sie hier .

Dan Lew
quelle
3

Heute musste ich die Seite Anforderungsparameter in ein assoziatives Array erhalten , damit ich zusammen die folgenden setzen, mit einer wenig Hilfe von meinen Freunden . Es werden auch Parameter ohne =as behandelt true.

Mit einem Beispiel:

// URL: http://www.example.com/test.php?abc=123&def&xyz=&something%20else

var _GET = (function() {
    var _get = {};
    var re = /[?&]([^=&]+)(=?)([^&]*)/g;
    while (m = re.exec(location.search))
        _get[decodeURIComponent(m[1])] = (m[2] == '=' ? decodeURIComponent(m[3]) : true);
    return _get;
})();

console.log(_GET);
> Object {abc: "123", def: true, xyz: "", something else: true}
console.log(_GET['something else']);
> true
console.log(_GET.abc);
> 123
Matt
quelle
2

Sie können die URL der aktuellen Seite analysieren, um die GET-Parameter zu erhalten. Die URL kann mit gefunden werden location.href.

Thomas Owens
quelle
Beachten Sie, dass dies nicht ganz zuverlässig ist, da der Server Sie möglicherweise an eine andere Stelle weitergeleitet hat. Aber es ist das Beste, was Sie tun können.
Joel Coehoorn
2

Eine kartenreduzierende Lösung:

var urlParams = location.search.split(/[?&]/).slice(1).map(function(paramPair) {
        return paramPair.split(/=(.+)?/).slice(0, 2);
    }).reduce(function (obj, pairArray) {            
        obj[pairArray[0]] = pairArray[1];
        return obj;
    }, {});

Verwendung:

For url: http://example.com?one=1&two=2
console.log(urlParams.one) // 1
console.log(urlParams.two) // 2
Lavi Avigdor
quelle
1
Könnten Sie bitte ansprechen, warum Sie hierfür eine Lösung zur Kartenreduzierung verwenden würden? Soweit ich weiß, ist die Kartenreduzierung beim Umgang mit wirklich großen Datenmengen effizient. Da dies nur eine HTTP-Anfrage ist, sehe ich keinen Sinn darin, eine Lösung zur Kartenreduzierung zu verwenden.
JorgeGRC
Eigentlich map/reduceist es nur ein Sammlungsverarbeitungsmechanismus: Kann mit Daten jeder Größe verwendet werden. Es ist berühmter für Big Data aufgrund seiner Bereitschaft zur Parallelisierung
javadba
0

Die Funktion hier gibt den Parameter nach Namen zurück. Mit winzigen Änderungen können Sie die Basis-URL, den Parameter oder den Anker zurückgeben.

function getUrlParameter(name) {
    var urlOld          = window.location.href.split('?');
    urlOld[1]           = urlOld[1] || '';
    var urlBase         = urlOld[0];
    var urlQuery        = urlOld[1].split('#');
    urlQuery[1]         = urlQuery[1] || '';
    var parametersString = urlQuery[0].split('&');
    if (parametersString.length === 1 && parametersString[0] === '') {
        parametersString = [];
    }
    // console.log(parametersString);
    var anchor          = urlQuery[1] || '';

    var urlParameters = {};
    jQuery.each(parametersString, function (idx, parameterString) {
        paramName   = parameterString.split('=')[0];
        paramValue  = parameterString.split('=')[1];
        urlParameters[paramName] = paramValue;
    });
    return urlParameters[name];
}
Zu groß.
quelle
0

Arbeitet für mich in

URL: http: // localhost: 8080 / # /? access_token = 111

function get(name){
  const parts = window.location.href.split('?');
  if (parts.length > 1) {
    name = encodeURIComponent(name);
    const params = parts[1].split('&');
    const found = params.filter(el => (el.split('=')[0] === name) && el);
    if (found.length) return decodeURIComponent(found[0].split('=')[1]);
  }
}
Maksim Tikhonov
quelle