Comment obtenir une chaîne de requête en JavaScript

Dans ce court article, nous aborderons différentes manières d'obtenir une chaîne de requête en JavaScript.

Lorsque vous utilisez JavaScript, vous devez parfois accéder aux paramètres de chaîne de requête dans votre script. Il n'existe aucun moyen direct de le faire, car il n'existe aucune fonction ou méthode JavaScript intégrée qui vous permette de le faire. Bien sûr, vous pouvez trouver de nombreux scripts utilitaires tiers qui répondent à vos besoins, mais il est préférable de le faire en utilisant du JavaScript simple.

Dans cet article, nous verrons comment créer une fonction personnalisée pour obtenir les paramètres de chaîne de requête en JavaScript simple. Plus tard, nous explorerons également l'interface URLSearchParams pour comprendre son fonctionnement et son aide avec les paramètres de chaîne de requête.

Comment obtenir une chaîne de requête dans Vanilla JavaScript

Dans cette section, nous verrons comment obtenir la valeur de la chaîne de requête en utilisant du JavaScript simple.

Jetons un coup d'œil à l'exemple JavaScript ci-dessous.

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

Nous avons créé la fonction getQueryStringValues que vous pouvez utiliser pour obtenir les valeurs des paramètres de chaîne de requête disponibles dans une URL.

Jetons un coup d'œil à la fonction et voyons comment elle fonctionne.

L'extrait de code suivant est l'un des extraits de code les plus importants de cette fonction.

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

Tout d'abord, nous utilisons indexOf 方法来查找 ? 字符在 URL 中的位置。接下来，我们使用 slice 方法提取 URL 中的查询字符串部分。最后，我们使用 split 方法通过 & 字符分割查询字符串。因此，url La variable est initialisée à l'aide du tableau de paramètres de chaîne de requête.

Ensuite, nous parcourons url 数组的所有元素。在循环中，我们使用 split 方法通过 = 字符来分割数组值。这样， arrParamInfo La variable est initialisée avec un tableau, où la clé du tableau est le nom du paramètre et la valeur du tableau est la valeur du paramètre. Vous pouvez le voir dans l'extrait de code ci-dessous.

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

Ensuite, nous le comparons avec les paramètres passés dans la fonction. S'il correspond au paramètre transmis, nous insérons la valeur du paramètre dans le tableau arrParamValues. Comme vous pouvez le voir, nous avons également introduit des paramètres simples et des paramètres de tableau.

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

Enfin, si la variable arrParamValues 变量包含值，我们将返回它，否则返回 null contient une valeur, nous la retournerons, sinon null sera renvoyé.

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

Vous pouvez continuer à tester la fonction getQueryStringValues avec différentes valeurs.

Comme le montre l'exemple ci-dessus, nous l'appelons avec différentes valeurs et enregistrons la sortie à l'aide de la fonction console.log. Une chose à noter est que si le paramètre que vous transmettez dans la fonction console.log 函数记录输出。需要注意的是，如果您在 getQueryStringValues est présent dans la chaîne de requête sous forme de tableau, vous obtiendrez un tableau en réponse et il renverra toutes les valeurs de ce paramètre.

URLSearchParams chemin

C'est l'un des moyens les plus simples d'obtenir des valeurs de chaîne de requête en JavaScript. URLSearchParams L'interface fournit des méthodes utilitaires pour gérer la chaîne de requête d'une URL. Vous pouvez vérifier la prise en charge du navigateur via « Puis-je l'utiliser ? »

Jetons un coup d'œil rapide à son fonctionnement.

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

Après avoir initialisé l'objet URLSearchParams 对象后，您就可以使用 URLSearchParams avec une chaîne de requête, vous pouvez utiliser les méthodes utilitaires fournies par l'objet

.

Présentons quelques méthodes utiles dans cet article.

get

Méthode

getComme son nom l'indique, la méthode

est utilisée pour obtenir la valeur du paramètre de chaîne de requête.

Essayons de le comprendre avec les exemples suivants.

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

keywordDans l'exemple ci-dessus, nous obtenons la valeur du paramètre de chaîne de requête , qui affichera le texte de recherche

.

getDe cette façon, vous pouvez utiliser la méthode

pour obtenir la valeur de n'importe quel paramètre de chaîne de requête.

has

Méthode

La méthode has

est utilisée pour vérifier si un paramètre existe dans la chaîne de requête.

// 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”

hasDans l'exemple ci-dessus, nous avons utilisé la méthode

pour vérifier la présence de différents paramètres.

getAll

Méthode

La méthode getAll

permet d'obtenir toutes les valeurs d'un paramètre lorsqu'il existe plusieurs fois.

Vérifions cela avec l'exemple suivant.

// 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”]

getAllComme vous pouvez le voir, lorsque nous utilisons la méthode

, elle renvoie toutes les valeurs associées à ce paramètre.

Conclusion

Aujourd'hui, nous avons discuté des différentes méthodes que vous pouvez utiliser pour obtenir des chaînes de requête en JavaScript. En plus du JavaScript simple, nous avons également expliqué comment obtenir des variables de chaîne de requête à l'aide de l'interface URLSearchParams

. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!