Maison > Article > interface Web > Comment créer des paramètres de requête en JavaScript ?

Comment créer des paramètres de requête en JavaScript ?

王林avant: 2023-09-21 15:53:02941parcourir

如何在 JavaScript 中创建查询参数？

Maintenant, la question est de savoir pourquoi nous devons créer des paramètres de requête à l'aide de JavaScript. Comprenons-le à travers des exemples concrets.

Par exemple, si vous visitez le site Web d'Amazon et recherchez un produit, vous verrez qu'il ajoute automatiquement votre requête de recherche à l'URL. Cela signifie que nous devons générer des paramètres de requête à partir de la requête de recherche.

Nous pouvons également permettre à l'utilisateur de sélectionner n'importe quelle valeur dans les options déroulantes. Nous pouvons générer des paramètres de requête et rediriger l'utilisateur vers une nouvelle URL basée sur les valeurs sélectionnées pour obtenir les résultats. Nous apprendrons à créer des paramètres de requête dans ce tutoriel.

Ici, nous verrons différents exemples de création de paramètres de requête.

Utilisez la méthode encodeURIComponent()

La méthode

encodeURIComponent() nous permet d'encoder les caractères spéciaux de l'URL. Par exemple, l'URL ne contient pas d'espaces. Par conséquent, nous devons remplacer le caractère espace par la chaîne « %20 », qui représente le format d'encodage du caractère espace.

De plus, encodedURLComponent() est utilisé pour encoder les composants de l'URL au lieu d'encoder l'intégralité de l'URL.

Grammaire

Les utilisateurs peuvent créer des paramètres de requête en suivant la syntaxe suivante et les encoder à l'aide de la méthode du composant URI codé ().

queryString += encodeURIComponent(key) + '='
        + encodeURIComponent(value) + '&';

Dans la syntaxe ci-dessus, key est la clé définie pour le paramètre de requête et la valeur est liée à la clé spécifique du paramètre de requête. Nous utilisons le caractère "=" pour séparer les clés et les valeurs, et le caractère "&" pour séparer les deux requêtes.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé l'objet et stocké les paires clé-valeur. À l'aide des clés et des valeurs de l'objet, nous créons des paramètres de requête. Après cela, une boucle for-of parcourt l'objet, obtient les paires clé-valeur un-à-un et utilise la méthode encodedURIComponent() pour générer une chaîne codée.

Enfin, nous prenons une sous-chaîne dont la longueur est égale à la longueur de la chaîne de requête -1 pour supprimer le dernier caractère "&".

<html>
<body>
   <h2>Using the <i>encodedURIComponent() method</i> to Create query params using JavaScript </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let objectData = {
         'search': 'JavaScript',
         'keyword': 'query params.'
      }
      let queryString = ""
      for (let key in objectData) {
         queryString += encodeURIComponent(key) + '='
         + encodeURIComponent(objectData[key]) + '&';
      }
      queryString = queryString.substr(0, queryString.length - 1)
      output.innerHTML += "The encoded query params is " + queryString;
   </script>
</body>
</html>

Exemple 2

Dans cet exemple, nous prenons les données saisies par l'utilisateur comme paramètres de requête. Nous avons utilisé la méthode prompt() pour obtenir les entrées de l'utilisateur, qui récupère les clés et les valeurs de l'utilisateur une par une.

Après cela, nous utilisons la méthode encodeURIComponent() pour créer les paramètres de requête en utilisant les valeurs saisies par l'utilisateur.

<html>
<body>
   <h2>Using the <i>encodedURIComponent() method</i> to Create query params of user input values</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let param1 = prompt("Enter the key for the first query", "key1");
      let value1 = prompt("Enter the value for the first query", "value1");
      let param2 = prompt("Enter the key for the second query", "key2");
      let value2 = prompt("Enter the value for the second query", "value2");
      let queryString = ""
      
      queryString += encodeURIComponent(param1) + '='
      + encodeURIComponent(value1) + '&';

      queryString += encodeURIComponent(param2) + '='
      + encodeURIComponent(value2);

      output.innerHTML += "The encoded query string from the user input is " + queryString;
   </script>
</body>
</html>

Dans ce tutoriel, les utilisateurs ont appris à créer des paramètres de requête à partir de différentes données. Nous avons appris à créer des paramètres de requête à partir de données d'objet. De plus, nous avons appris à utiliser les entrées de l'utilisateur pour créer des paramètres de requête, ce qui est très utile lors de l'ajout d'une fonctionnalité de recherche à un site Web.

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!

JavaScript for 字符串对象 prompt

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment obtenir l'opacité d'un objet Texte à l'aide de FabricJS ?Article suivant：Comment obtenir l'opacité d'un objet Texte à l'aide de FabricJS ?

Articles Liés

Voir plus