Passer des paramètres à une autre page Web

Comment passer des paramètres à une page web?

Pour cela on crée un formulaire dont les valeurs seront transmises automatiquement, et dans la page de destination, un script va recevoir les valeurs transmises.

Nous avons vu comment créer un formulaire, ici nous allons détailler comme extraire les données transmises.

1) Comprendre le format des paramètres d'URL

Trois symboles sont utilisés pour ajouter une chaîne de paramètres à une URL:

  ?   concatène l'URL et la chaîne de paramètres.
  &   sépare les paramètres multiples.
  =   assigne une valeur à une variable.

Exemple:

https://www.xul.fr/demo.html?login="moi"&password="1234"

Dans cet exemple, nous avons deux paramètres, login et password, auxquels sont assignés les valeurs "moi" et "1234".

2) Les valeurs sont transmises du formulaire au serveur

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.

La méthode GET ajoute les données à l'URL, tandis que la méthode POST les transmettrait directement.

Envoyer des données sans formulaire

Si l'on veut passer des paramètres à un script ou une page sans afficher un formulaire (mais en utilisant une balise form), on utilise le champ "hidden":

<form action="autrepage.html">
    <input type="hidden" name="nomvar"  value="12345" />
    <input type="submit" value="Envoyer les données">
</form>

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

3) Récupérer les données incluses dans l'URL dans la page

L'attribut location.search contient la chaîne des paramètres, il reste à l'analyser.

Voici le code complet pour le traitement des données transmises:

<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:

location.search est la propriété qui contient la liste des paramètres.
substring(1) saute le symbole ? et retourne la chaîne sans ce symbole.
split("&") découpe la chaîne et retourne un tableau dont les éléments sont les paramètres.
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.
il faut encore découper le paramètre dans un autre petit tableau qui contiendra le nom de la variable et la valeur.
dans cet exemple, nous utilisons seulement la valeur, aussi nous indiçons le petit tableau sur le second élément, temp[1].
la fonction unescape convertit les caractères spéciaux.
on a assigné la variable l avec la valeur de login et la variable p avec le mot de passe.
le login est écrit dans le champ log grâce à la méthode getElementById.
et le mot de passe dans le champ pass.

4) Compléter la page chargée avec les données reçues

Dans cet exemple, je suppose que l'on veut écrire les données dans la page qui reçoit les données.
La variable login a été assignée dans le code précédent.
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;

5) Maintenant, testons le script

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

Voir aussi