So erhalten Sie eine Abfragezeichenfolge in JavaScript

In diesem kurzen Artikel besprechen wir einige verschiedene Möglichkeiten, Abfragezeichenfolgen in JavaScript abzurufen.

Wenn Sie JavaScript verwenden, müssen Sie manchmal auf Abfragezeichenfolgenparameter in Ihrem Skript zugreifen. Es gibt keine direkte Möglichkeit, dies zu tun, da es keine integrierten JavaScript-Funktionen oder -Methoden gibt, die dies ermöglichen. Natürlich können Sie viele Dienstprogrammskripte von Drittanbietern finden, die Ihren Anforderungen entsprechen, aber es ist besser, dies mit einfachem JavaScript zu tun.

In diesem Beitrag besprechen wir, wie man eine benutzerdefinierte Funktion erstellt, um Abfragezeichenfolgenparameter in einfachem JavaScript abzurufen. Später werden wir auch die URLSearchParams-Schnittstelle untersuchen, um zu verstehen, wie sie funktioniert und wie sie bei Abfragezeichenfolgenparametern hilft.

So erhalten Sie eine Abfragezeichenfolge in Vanilla JavaScript

In diesem Abschnitt erfahren Sie, wie Sie den Wert der Abfragezeichenfolge mithilfe von einfachem JavaScript abrufen.

Werfen wir einen Blick auf das JavaScript-Beispiel unten.

function getQueryStringValues(key) {
    var arrParamValues = [];
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for (var i = 0; i < url.length; i++) {
        var arrParamInfo = url[i].split('=');

        if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
            arrParamValues.push(decodeURIComponent(urlparam[1]));
        }
    }

    return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
}

// index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading
console.log(getQueryStringValues('keyword')); // "FooBar"
console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]
console.log(getQueryStringValues('keyNotExits')); // null

Wir haben die Funktion getQueryStringValues erstellt, mit der Sie die Werte der in einer URL verfügbaren Abfragezeichenfolgenparameter abrufen können.

Werfen wir einen Blick auf die Funktion und sehen, wie sie funktioniert.

Der folgende Codeausschnitt ist einer der wichtigsten Codeausschnitte in dieser Funktion.

var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

Zuerst verwenden wir indexOf 方法来查找 ? 字符在 URL 中的位置。接下来，我们使用 slice 方法提取 URL 中的查询字符串部分。最后，我们使用 split 方法通过 & 字符分割查询字符串。因此，url Die Variable wird mithilfe des Abfragezeichenfolgen-Parameterarrays initialisiert.

Als nächstes durchlaufen wir url 数组的所有元素。在循环中，我们使用 split 方法通过 = 字符来分割数组值。这样， arrParamInfo Die Variable wird mit einem Array initialisiert, wobei der Array-Schlüssel der Parametername und der Array-Wert der Parameterwert ist. Sie können dies im Codeausschnitt unten sehen.

var arrParamInfo = url[i].split('=');

Als nächstes vergleichen wir es mit den in der Funktion übergebenen Parametern. Wenn es mit dem übergebenen Parameter übereinstimmt, verschieben wir den Parameterwert in das arrParamValues-Array. Wie Sie sehen, haben wir auch Einzelparameter und Array-Parameter eingeführt.

if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
    arrParamValues.push(decodeURIComponent(urlparam[1]));
}

Wenn die Variable arrParamValues 变量包含值，我们将返回它，否则返回 null schließlich einen Wert enthält, geben wir ihn zurück, andernfalls wird null zurückgegeben.

return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);

Sie können die getQueryStringValues-Funktion weiterhin mit verschiedenen Werten testen.

Wie im obigen Beispiel gezeigt, rufen wir es mit unterschiedlichen Werten auf und protokollieren die Ausgabe mit der Funktion console.log. Beachten Sie Folgendes: Wenn der Parameter, den Sie in der Funktion console.log 函数记录输出。需要注意的是，如果您在 getQueryStringValues übergeben, in der Abfragezeichenfolge als Array vorhanden ist, erhalten Sie als Antwort ein Array, das alle Werte dieses Parameters zurückgibt.

URLSearchParams Weg

Dies ist eine der einfachsten Möglichkeiten, Abfragezeichenfolgenwerte in JavaScript abzurufen. URLSearchParams Die Schnittstelle bietet Hilfsmethoden zur Verarbeitung der Abfragezeichenfolge einer URL. Sie können die Browserunterstützung unter „Kann ich sie verwenden?“ überprüfen.

Lassen Sie uns einen kurzen Blick darauf werfen, wie es funktioniert.

// index.php?keyword=Search Text&click=Submit
var urlParams = new URLSearchParams(window.location.search);

Nachdem Sie das URLSearchParams 对象后，您就可以使用 URLSearchParams-Objekt mit einer Abfragezeichenfolge initialisiert haben, können Sie die vom

-Objekt bereitgestellten Dienstprogrammmethoden verwenden.

Lassen Sie uns in diesem Artikel einige nützliche Methoden vorstellen.

get

Methode

getWie der Name schon sagt, wird die Methode

verwendet, um den Wert des Abfragezeichenfolgenparameters abzurufen.

Versuchen wir es anhand der folgenden Beispiele zu verstehen.

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.get('keyword')); // “Search Text”

keywordIm obigen Beispiel erhalten wir den Wert des Abfragezeichenfolgenparameters, der den Suchtext

ausgibt.

getAuf diese Weise können Sie die Methode

verwenden, um den Wert eines beliebigen Abfragezeichenfolgenparameters abzurufen.

has

Methode

Mit der Methode has

wird überprüft, ob ein Parameter in der Abfragezeichenfolge vorhanden ist.

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.has('order')); // “false”
console.log(objUrlParams.has('click')); // “true”

hasIm obigen Beispiel haben wir die

-Methode verwendet, um das Vorhandensein verschiedener Parameter zu überprüfen.

getAll

Methode

Die Methode getAll

wird verwendet, um alle Werte eines Parameters abzurufen, wenn dieser mehrmals vorhanden ist.

Schauen wir uns das anhand des folgenden Beispiels an.

// index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]

getAllWie Sie sehen können, werden bei Verwendung der

-Methode alle mit diesem Parameter verknüpften Werte zurückgegeben.

Fazit

Heute haben wir die verschiedenen Methoden besprochen, mit denen Sie Abfragezeichenfolgen in JavaScript abrufen können. Zusätzlich zu einfachem JavaScript haben wir auch besprochen, wie man Abfragezeichenfolgenvariablen mithilfe der URLSearchParams

-Schnittstelle erhält. 🎜

Das obige ist der detaillierte Inhalt vonSo erhalten Sie eine Abfragezeichenfolge in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!