JavaScript : fonctions getQueryString - 3 fonctions pour le traitement des paramètres URL

Télécharger le source

Je vous propose donc ici 3 fonctions du type Request.QueryString().
Deux renvoyant la valeur d'un paramètre soit en fournissant son nom soit en fournissant sa position et une revoyant le nom du paramètre par sa position.
Vous allez voir, c'est simple.

Petite analyse du script

On commence par extraire la requête de la chaîne URL et pour cela on utilise la propriété search de l'objet Location. En introduction je disais qu'aucune fonction toute faite n'existait pour gérer les paramètres d'URL en JS ( mauvaise langue va ! ) et bien ce n'est pas tout à fait vrai, car la propriété search récupère toute la requête faisant partie de la chaîne URL (y compris le ? d'où l'utilisation de la méthode substr()).

Ensuite on extrait les paires (propriété=valeur) à l'aide de la de la méthode split() (utiliser l'esperluette '&' comme séparateur).

Reste à séparer chaque nom de propriétés de chaque valeurs ( utilisation des méthodes substring() et indexOf() ) que nous stockons respectivement dans 2 tableaux ( Array : aPrm et aVal ). Un pour les noms et un pour les valeurs.

Ah, j'allais oublier l'utilisation du constructeur Object() (création d'objet vide) que nous utilisons ici pour stocker les valeurs de paramètres sous la forme de propriétés de cet objet (les propriétés sont les noms de paramètre).

Pour finir, passons à la construction des fonctions :
- Pour la première, getQueryStringByName() ( renvoie la valeur du paramètre d'URL identifié par son nom ), nous utilisons les propriétés de l'objet vide ( objQS ). Pour cela on utilise un argument de fonction ( pnom ) et à l'appel de la fonction, on passe à l'argument le nom de la propriété ( nom du paramètre d'URL ) pour laquelle on souhaite obtenir la valeur.
- getQueryStringByPos() ( renvoie la valeur du paramètre d'URL identifiée par sa position ). On passe à l'argument ( ppos ) de cette fonction la position du paramètre d'URL, et sa valeur nous est retournée par le tableau aVal[].
- getParamNameByPos() ( renvoie le nom du paramètre d'URL identifiée par sa position ). On passe à l'argument ( ppos ) de cette fonction la position du paramètre d'URL, et son nom nous est retourné par le tableau aPrm[].

Mode d'emploi

1 - Inclure le script dans votre page :

<head> ... <script language="JavaScript" type="text/javascript" src="querystring_fonc.js"> </script> ... </head>

2 - Appel des fonctions :
Exemple avec getQueryStringByName() sur un bouton de formulaire.

<body> ... <form name="leform"> Nom du paramètre : <input type="text" name="zone" /> <input type="button" value="getQueryStringByName( )" onclick="alert(getQueryStringByName (document.leform.zone.value));" /> </form> ... </body>

Le Script

// ********************************** // * Nom du script : querystring_fonc v1.0 // * Auteur: Frédéric REMISE (Derf) // * Date de création: 23/01/2003 // * Email : // ********************************** // Récupération de la requête contenue dans l'URL (sans le ?) var req = window.location.search.substr(1,window.location.search.length); // Récupération des paires paramètre=valeur var dbl = req.split('&'); var aPrm = new Array(); // Pour stock. le nom des paramètres var aVal = new Array(); // Pour stock. la valeur des paramètres var objQS = new Object(); // Objet pour stock. le nom des paramètres for (i=0;i < dbl.length;i++) { // Recup. le nom des parametres (Attention : elem.1 du tab. = param.1) aPrm[i+1] = dbl[i].substring(0,dbl[i].indexOf('=')); // Recup. la valeur des parametres (Attention : elem.1 du tab. = val.param.1) aVal[i+1] = unescape(dbl[i].substring(dbl[i].indexOf('=')+1,dbl[i].length)); // Stock la valeur des paramètres sous forme de propriété objQS[aPrm[i+1]] = aVal[i+1]; } // Renvoie la valeur d'un parametre par son nom function getQueryStringByName(pname) { return eval("objQS." + pname); } // Renvoie la valeur d'un paramètre par sa position dans la requete // Attention : le premier paramètre de la requete est le 1 etc.. function getQueryStringByPos(ppos) { return aVal[ppos]; } // Renvoie le nom d'un paramètre par sa position dans la requete // Attention : le premier paramètre de la requete est le 1 etc.. function getParamNameByPos(ppos) { return aPrm[ppos]; }

Remarques

- Dans la boucle for vous remarquerez que j'ajoute 1 à i (i+1) pour l'affectation des valeurs aux tableaux aVal[] et aPrm[]; C'est parce que je préfère compter à partir de 1 ( contraire à JS qui, lui, compte à partir de 0 ). D'autre part, je ne pouvais pas initialiser i à 1 du fait que le tableau généré par le split() est compté à partir de 0.

- J'espère avoir été clair dans mes explications; Si ce n'était pas le cas, n'hésitez pas à me poser vos questions et me faire part de vos remarques dans le forum lié à cette rubrique.

- Comme toujours, ce script reste perfectible ( tout comme mon explication d'ailleurs );

Que la force soit avec vous et bon amusement...
Fred. R. (alias Derf)
www.exponense.com