Share via

Exemple : Transmettre plusieurs valeurs à une ressource web via le paramètre de données

  • Article

Une page de ressource web (HTML) ne peut accepter qu’un seul paramètre personnalisé appelé data. Pour transmettre plusieurs valeurs dans le paramètre de données, vous devez encoder les paramètres et les décoder dans votre page.

La page ici représente une technique permettant de transmettre les valeurs supplémentaires au sein d’un paramètre unique et de les traiter dans votre ressource web.

Notes

Seuls les caractères alphanumériques sont pris en charge comme paramètres des ressources Web. Tous les caractères inclus dans la chaîne de requête passent par la validation pour garantir la validité des paramètres passés. Si certains paramètres ne sont pas valides, la requête échouera. Par exemple, la transmission de valeurs de texte entre crochets angulaires est considérée comme un type de paramètre non valide.

Exemple de ressource web HTML

Le code HTML ci-dessous représente une ressource web (HTML) de page web comprenant un script qui définit trois fonctions :

  • getDataParam : appelée à partir de l’événement body.onload, cette fonction récupère les paramètres de chaîne de requête transmis à la page et recherche un paramètre nommé data.

  • parseDataValue : reçoit le paramètre de données de getDataParam et génère un tableau DHTML pour afficher les valeurs transmises dans le paramètre data.

    Notes

    Tous les caractères inclus dans la chaîne de requête sont encodés à l’aide de la fonction encodeURIComponent. Cette fonction utilise JavaScript fonction decodeURIComponent pour décoder les valeurs transmises.

  • noParams : affiche un message lorsqu’aucun paramètre n’est transmis à la page.

<!DOCTYPE html >  
<html lang="en-us">  
<head>  
 <title>Show Data Parameters Page</title>  
 <style type="text/css">  
  body  
  {  
   font-family: Segoe UI, Tahoma, Arial;  
   background-color: #d6e8ff;  
  }  
  tbody  
  {  
   background-color: white;  
  }  
  th  
  {  
   background-color: black;  
   color: White;  
  }  
 </style>  
 <script type="text/javascript">  
  document.onreadystatechange = function () {  
   if (document.readyState == "complete") {  
    getDataParam();  
   }  
  }  
  
  function getDataParam() {  
   //Get the any query string parameters and load them  
   //into the vals array  
  
   var vals = new Array();  
   if (location.search != "") {  
    vals = location.search.substr(1).split("&");  
    for (var i in vals) {  
     vals[i] = vals[i].replace(/\+/g, " ").split("=");  
    }  
    //look for the parameter named 'data'  
    var found = false;  
    for (var i in vals) {  
     if (vals[i][0].toLowerCase() == "data") {  
      parseDataValue(vals[i][1]);  
      found = true;  
      break;  
     }  
    }  
    if (!found)  
    { noParams(); }  
   }  
   else {  
    noParams();  
   }  
  }  
  
  function parseDataValue(datavalue) {  
   if (datavalue != "") {  
    var vals = new Array();  
  
    var message = document.createElement("p");  
    setText(message, "These are the data parameters values that were passed to this page:");  
    document.body.appendChild(message);  
  
    vals = decodeURIComponent(datavalue).split("&");  
    for (var i in vals) {  
     vals[i] = vals[i].replace(/\+/g, " ").split("=");  
    }  
  
    //Create a table and header using the DOM  
    var oTable = document.createElement("table");  
    var oTHead = document.createElement("thead");  
    var oTHeadTR = document.createElement("tr");  
    var oTHeadTRTH1 = document.createElement("th");  
    setText(oTHeadTRTH1, "Parameter");  
    var oTHeadTRTH2 = document.createElement("th");  
    setText(oTHeadTRTH2, "Value");  
    oTHeadTR.appendChild(oTHeadTRTH1);  
    oTHeadTR.appendChild(oTHeadTRTH2);  
    oTHead.appendChild(oTHeadTR);  
    oTable.appendChild(oTHead);  
    var oTBody = document.createElement("tbody");  
    //Loop through vals and create rows for the table  
    for (var i in vals) {  
     var oTRow = document.createElement("tr");  
     var oTRowTD1 = document.createElement("td");  
     setText(oTRowTD1, vals[i][0]);  
     var oTRowTD2 = document.createElement("td");  
     setText(oTRowTD2, vals[i][1]);  
  
     oTRow.appendChild(oTRowTD1);  
     oTRow.appendChild(oTRowTD2);  
     oTBody.appendChild(oTRow);  
    }  
  
    oTable.appendChild(oTBody);  
    document.body.appendChild(oTable);  
   }  
   else {  
    noParams();  
   }  
  }  
  
  function noParams() {  
   var message = document.createElement("p");  
   setText(message, "No data parameter was passed to this page");  
  
   document.body.appendChild(message);  
  }  
  //Added for cross browser support.  
  function setText(element, text) {  
   if (typeof element.innerText != "undefined") {  
    element.innerText = text;  
   }  
   else {  
    element.textContent = text;  
   }  
  
  }  
 </script>  
</head>  
<body>  
</body>  
</html>

Utilisation de cette page

  1. Créez une ressource web de page web appelée « new_/ShowDataParams.htm » en utilisant l’exemple de code.

    Les paramètres à transmettre sont : first=First Value&second=Second Value&third=Third Value

    Notes

    Si vous ajoutez des paramètres statiques à l’aide de la boîte de dialogue Propriétés de la ressource web de l’éditeur de formulaires, vous pouvez simplement coller les paramètres sans les encoder dans la colonne Custom Parameter(data). Ces valeurs sont encodées pour vous, mais vous devez quand même les décoder et extraire les valeurs dans votre page.

  2. Pour les valeurs dynamiques générées dans le code, utilisez la méthode encodeURIComponent sur les paramètres. Les valeurs encodées doivent être :

    first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value

    Ouvrez la page en transmettant les paramètres encodés en tant que valeur du paramètre de données :

    https://<server name>/WebResources/new_/ShowDataParams.htm?data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value

    Notes

    Si vous avez ajouté la ressource web à un formulaire et collé les paramètres non codés dans la colonne Paramètres personnalisés (données), il vous suffit de prévisualiser le formulaire.

  3. new_/ShowDataParams.htm affiche un tableau généré dynamiquement :

    Paramètre Valeur
    Premier Première valeur
    Deuxième Deuxième valeur
    Troisième Troisième valeur

Fonctionnement

Pour accéder aux valeurs incorporées dans la valeur du paramètre de chaîne de requête de données, dans la ressource web de votre page web, vous pouvez extraire la valeur du paramètre de données, puis utiliser le code pour scinder la chaîne en tableau afin que vous puissiez accéder individuellement à chaque paire de valeurs de nom.

Lorsque la page se charge, la fonction getDataParam est appelée. Cette fonction identifie simplement le paramètre de données et transmet la valeur à la fonction ParseDataValue. Si aucun paramètre de données n’est trouvé, la fonction noParams ajoute un message à la page au lieu du tableau.

La fonction ParseDataValue utilise une logique similaire contenue dans getDataParam pour rechercher les délimiteurs de paramètre personnalisés afin de créer un tableau de paires de valeurs de nom. Elle génère ensuite un tableau et l’ajoute au document.body vide.

Voir aussi

Ressources web des pages web (HTML)
Ressources Web

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).