Wie man GET-Parameter von JavaScript abruft

Question

Bedenken Sie:

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

Für js innerhalb page.html wie kann sie abrufen GET Parameter?

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

Aber es sollte auch für komplexe Abfragezeichenfolgen funktionieren...

Answer 1

Mit dem fenster.standort Objekt. Mit diesem Code erhalten Sie GET ohne das Fragezeichen.

window.location.search.substr(1)

In Ihrem Beispiel wird Folgendes zurückgegeben returnurl=%2Fadmin

EDIT : Ich habe mir die Freiheit genommen, die Qwerty's Antwort das ist wirklich gut und ich habe genau das befolgt, was der Auftraggeber verlangt hat:

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 sie durch eine Variable (tmp) ersetzt und außerdem decodeURIComponent genau wie von OP gewünscht. Ich bin nicht sicher, ob dies ein Sicherheitsproblem sein kann oder nicht.

Oder aber mit einer einfachen for-Schleife, die auch im 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;
}

Answer 2

window.location.search wird alles ab dem ? zurückgeben. Dieser Code unten entfernt das ?, verwendet Split, um in Schlüssel/Wert-Arrays zu trennen, und weist dann benannte Eigenschaften den Parameter Objekt:

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 dann die Test Parameter von http://myurl.com/?test=1 durch den Aufruf params.test .

Answer 3

Sie sollten die nativen Funktionen URL und URLSearchParams verwenden:

let url = new URL("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
let params = new URLSearchParams(url.search);
let sourceid = params.get('sourceid') // 'chrome-instant'
let q = params.get('q') // 'mdn query string'
let ie = params.has('ie') // true
params.append('ping','pong')

console.log(sourceid)
console.log(q)
console.log(ie)
console.log(params.toString())
console.log(params.get("ping"))

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

Answer 4

tl;dr Lösung mit einer einzigen Code-Zeile unter Verwendung von 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 . Es ist leider nicht mit mehrwertigen Schlüsseln und kodierten Zeichen umgehen.

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

Schlüssel mit mehreren Werten y kodierte Zeichen ?

Siehe die ursprüngliche Antwort unter Wie kann ich Abfrage-String-Werte in JavaScript erhalten? .

"?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"]

---

In Ihrem Beispiel würden Sie auf den Wert wie folgt zugreifen:

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

Answer 5

Eine schickere Art, das 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;
                      }, {});