Passer des paramètres à une page Web

Comment passer des paramètres à une page web? Cela se fait par un formulaire et un script pour recevoir les valeurs.

Format de l'URL

Trois symboles sont utilisés pour définir une chaîne de paramètres à passer:

  ?   concatène l'URL et la chaîne de paramètres.
  &   sépares les paramètres.
  =   assigne le nom d'une variable avec une valeur.

Exemple:

http://www.xul.fr/demo.html?login="me"&password="1234"

Envoi des valeurs

Il n'y a rien de particulier à faire pour envoyer les valeurs: toutes les variables et leurs valeurs dans un formulaire sont automatiquement envoyées pourvu que la propriété "action" du formulaire désigne le nom d'un fichier à charger.

L'attribut "name" de chaque élément de formulaire fournit le nom de la variable et l'attribut "value" fournit sa valeur.

<form action="param-back.html" method="GET">
...divers composants graphiques...
</form>

Voir le source du formulaire plus loin.

Compléter la page chargée

Dans cet exemple, je suppose que l'on veut écrire les données dans la page qui est chargée avec les paramètres
Deux champs ont été définies dans la page:

 <div id="log"></div>
 <div id="pass"></div>

Les champs sont identifiés par la propriété id. Pour les remplir avec les données, on utilise la méthode de DOM getElementById("") et la propriété innerHTML.

getElementById("log").innerHTML = login;

Paramètres sans objets de formulaire

Si l'on veut passer des paramètres à un script ou une page sans qu'ils correspondant à un objet de formulaire, on utilise le champ "hidden":

<form action="autrepage.html">
    <input type="hidden" name="nomvar"  value="12345" />
</form>

Ce formulaire non apparent passera à autrepage.html l'argument nomvar=12345.

Traitement des paramètres

Voila le code complet pour le traitement des paramètres:

<script language="JavaScript">
  function processUser()
  {
    var parameters = location.search.substring(1).split("&");

    var temp = parameters[0].split("=");
    l = unescape(temp[1]);
    temp = parameters[1].split("=");
    p = unescape(temp[1]);
    document.getElementById("log").innerHTML = l;
    document.getElementById("pass").innerHTML = p;
  }
</script>

Explications:

1. location.search est la propriété qui contient la liste des paramètres.
2. substring(1) saute le symbole ? et retourne la chaîne sans ce symbole.
3. split("&") découpe la chaîne et retourne un tableau dont les éléments sont les paramètres.
4. on assigne ce tableau à la variable "parameters". On peut alors accéder aux éléments particuliers en indiçant le tableau. Parameters[0] est le premier élément.
5. il faut encore découper le paramètre dans un autre petit tableau qui contiendra le nom de la variable et la valeur.
6. dans cet exemple, nous utilisons seulement la valeur, aussi nous indiçons le petit tableau sur le second élément, temp[1].
7. la fonction unescape convertit les caractères spéciaux.
8. on a assigné la variable l avec la valeur de login et la variable p avec le mot de passe.
9. le login est écrit dans le champ log grâce à la méthode getElementById.
10. et le mot de passe dans le champ pass.

Maintenant, testons le script

Remplir les champs ci-dessous et cliquez sur le bouton.

Login:

Mot de passe:

(c) 2006-2010 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ce tutoriel pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.