webentwicklung-frage-antwort-db.com.de

Wie rufe ich GET-Parameter aus Javascript ab?

http://domain.com/page.html?returnurl=%2Fadmin

Wie kann für js in page.htmlGET Parameter abgerufen werden?

Für das obige einfache Beispiel sollte func('returnurl')/admin sein.

Es sollte aber auch für komplexe Abfragen funktionieren ...

javascriptget
328
compile-fan

Mit dem Objekt window.location . Dieser Code gibt Ihnen GET ohne das Fragezeichen.

window.location.search.substr(1)

Aus Ihrem Beispiel wird returnurl=%2Fadmin zurückgegeben.

EDIT: Ich habe mir erlaubt, Qwertys Antwort zu ändern, was wirklich ist gut , und als er darauf hinwies, folgte ich genau dem, was das OP verlangte:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

Ich habe die doppelte Funktionsausführung aus seinem Code entfernt und eine Variable (tmp) ersetzt. Außerdem habe ich decodeURIComponent hinzugefügt, genau so, wie es OP verlangt hat. Ich bin nicht sicher, ob dies ein Sicherheitsproblem sein kann oder nicht.

Oder anders mit plain for loop, was auch in IE8 funktioniert:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}
343
Bakudan

window.location.search gibt alles vom zurück? auf. Der folgende Code entfernt das?, Teilt es mit Hilfe von split in Schlüssel-/Wert-Arrays auf und weist dem params-Objekt dann benannte Eigenschaften zu:

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

Sie können den Testparameter dann von http://myurl.com/?test=1 abrufen, indem Sie params.test aufrufen.

259
weltraumpirat

tl; dr Lösung in einer einzigen Codezeile mit Vanilla Javascript

var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

Dies ist die einfachste Lösung . Leider verarbeitet keine mehrwertigen Schlüssel und codierten Zeichen.

"?a=1&a=%2Fadmin&b=2&c=3&d&e"
> queryDict
a: "%2Fadmin"  //overriden with last value, not decoded.
b: "2"
c: "3"
d: undefined
e: undefined

mehrwertige Schlüssel und codierte Zeichen ?

Die ursprüngliche Antwort finden Sie unter Wie kann ich Abfragezeichenfolgenwerte in JavaScript abrufen?

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab&a=%2Fadmin"
> queryDict
a: ["1", "5", "t e x t", "/admin"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

"?returnurl=%2Fadmin"
> qd.returnurl    // ["/admin"]
> qd['returnurl'] // ["/admin"]
> qd.returnurl[0] // "/admin"
132
Qwerty

Hey, hier ist die richtige Antwort für 2016:

some = new URLSearchParams("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
var q = some.get('q') // 'mdn query string'
var ie = some.has('ie') // true
some.append('new','here')

console.log(q)
console.log(ie)
console.log(some)

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamshttps://polyfill.io/v2/docs/features/

82
AKnox

eine ausgefallenere Art, es zu tun: :)

var options = window.location.search.slice(1)
                      .split('&')
                      .reduce(function _reduce (/*Object*/ a, /*String*/ b) {
                        b = b.split('=');
                        a[b[0]] = decodeURIComponent(b[1]);
                        return a;
                      }, {});
37
Stefan

ich mache es so (um einen bestimmten get-Parameter abzurufen, hier 'parameterName'):

var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);
9
lsblsb

Dieser benutzt regex und gibt null zurück, wenn param nicht existiert oder keinen Wert hat:

function getQuery(q) {
   return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}
6
Ali

Hier habe ich diesen Code gemacht, um die GET-Parameter in ein Objekt umzuwandeln, um sie einfacher zu verwenden.

//Get Nav Url
function getNavUrl() {
    //Get Url
    return window.location.search.replace("?", "");
};
function getParameters(url) {
    //Params obj
    var params = {};
    //To lowercase
    url = url.toLowerCase();
    //To array
    url = url.split('&');

    //Iterate over url parameters array
    var length = url.length;
    for(var i=0; i<length; i++) {
        //Create prop
        var prop = url[i].slice(0, url[i].search('='));
        //Create Val
        var value = url[i].slice(url[i].search('=')).replace('=', '');
        //Params New Attr
        params[prop] = value;
    }
    return params;
};
//Call To getParameters
console.log(getParameters(getNavUrl()));
6
Lucas Serena
var getQueryParam = function(param) {
    var found;
    window.location.search.substr(1).split("&").forEach(function(item) {
        if (param ==  item.split("=")[0]) {
            found = item.split("=")[1];
        }
    });
    return found;
};
3
Jonas Sciangula Street

Diese Lösung übernimmt die URL-Dekodierung:

var params = function() {
    function urldecode(str) {
        return decodeURIComponent((str+'').replace(/\+/g, '%20'));
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = urldecode(tmparr[1]);
        }
        return params;
    }

    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}();

Verwendungszweck:

console.log('someParam GET value is', params['someParam']);
2
Jonah

Ich habe eine einfache Javascript-Funktion erstellt, um über eine URL auf GET-Parameter zuzugreifen.

Fügen Sie einfach diese Javascript-Quelle hinzu und Sie können auf get Parameter zugreifen. Zum Beispiel: In http://example.com/index.php?language=french kann auf die Variable language als $_GET["language"] zugegriffen werden. Ebenso wird eine Liste aller Parameter in einer Variablen $_GET_Params als Array gespeichert. Sowohl Javascript als auch HTML sind im folgenden Codeausschnitt enthalten:

<!DOCTYPE html>
<html>
  <body>
    <!-- This script is required -->
    <script>
    function $_GET() {
      // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india
      var href = window.location.href;
        
      // Get the protocol e.g. http
      var protocol = window.location.protocol + "//";
        
      // Get the Host name e.g. www.google.com
      var hostname = window.location.hostname;
        
      // Get the pathname e.g. /files/script.php
      var pathname = window.location.pathname;
        
      // Remove protocol part
      var queries = href.replace(protocol, '');
        
      // Remove Host part
      queries = queries.replace(hostname, '');
        
      // Remove pathname part
      queries = queries.replace(pathname, '');
        
      // Presently, what is left in the variable queries is : ?v=1.8.7&country=india
        
      // Perform query functions if present
      if (queries != "" && queries != "?") {
        
        // Remove question mark '?'
        queries = queries.slice(1);
        
        // Split all the different queries
        queries = queries.split("&");
                
        // Get the number of queries
        var length = queries.length;
                
        // Declare global variables to store keys and elements
        $_GET_Params = new Array();
        $_GET = {};
        
        // Perform functions per query
        for (var i  = 0; i < length; i++) {
                        
          // Get the present query
          var key = queries[i];
                        
          // Split the query and the value
          key = key.split("=");
                        
          // Assign value to the $_GET variable
          $_GET[key[0]] = [key[1]];
                        
          // Assign value to the $_GET_Params variable
          $_GET_Params[i] = key[0];
        }
      }
    }

    // Execute the function
    $_GET();
    </script>
    <h1>GET Parameters</h1>
    <h2>Try to insert some get parameter and access it through javascript</h2>
  </body>
</html>
2
Chandrashekar

Wenn es Ihnen nichts ausmacht, eine Bibliothek zu verwenden, anstatt Ihre eigene Implementierung zu rollen, lesen Sie https://github.com/jgallen23/querystring .

2
thSoft

Hier ist ein weiteres Beispiel, das auf dem obigen Beispiel von Kat und Bakudan basiert, es jedoch etwas allgemeiner macht.

function getParams ()
{
    var result = {};
    var tmp = [];

    location.search
        .substr (1)
        .split ("&")
        .forEach (function (item) 
        {
            tmp = item.split ("=");
            result [tmp[0]] = decodeURIComponent (tmp[1]);
        });

    return result;
}

location.getParams = getParams;

console.log (location.getParams());
console.log (location.getParams()["returnurl"]);
2
E Net Arch

So rufen Sie die Parameter als JSON-Objekt ab:

alert(getUrlParameters().toSource())

function explode(delim, str)
{
    return str.split(delim);
}

function getUrlParameters()
{
    var out = {};
    var str = window.location.search.replace("?", "");
    var subs = explode('&', str);
    for(var i = 0; i < subs.length; ++i)
    {
        var vals = explode('=', subs[i]);
        out[vals[0]] = vals[1];
    }
    return out;
}
1
Randhir Rawatlal

Meine Lösung erweitert die von @ tak3r

Es gibt ein leeres Objekt zurück, wenn keine Abfrageparameter vorhanden sind, und unterstützt die Array-Notation ?a=1&a=2&a=3:

function getQueryParams () {
  function identity (e) { return e; }
  function toKeyValue (params, param) {
    var keyValue = param.split('=');
    var key = keyValue[0], value = keyValue[1];

    params[key] = params[key]?[value].concat(params[key]):value;
    return params;
  }
  return decodeURIComponent(window.location.search).
    replace(/^\?/, '').split('&').
    filter(identity).
    reduce(toKeyValue, {});
}
1
gtramontina

Wenn Sie anglejs verwenden, können Sie $routeParams mit dem ngRoute -Modul verwenden

Sie müssen das Modul zu Ihrer App hinzufügen

angular.module('myApp', ['ngRoute'])

Jetzt können Sie den Dienst $routeParams verwenden.

.controller('AppCtrl', function($routeParams) {
  console.log($routeParams); //json object 
}
1
vusan

Sie können die im Standortobjekt verfügbare Suchfunktion verwenden. Die Suchfunktion gibt den Parameterteil der URL an. Details finden Sie hier - http://www.javascriptkit.com/jsref/location.shtml

Sie müssen die resultierende Zeichenfolge analysieren, um die Variablen und ihre Werte zu erhalten, z. Aufteilen auf '='

0
Gaurav Saxena