Maison > Article > interface Web > Comment implémenter la fonction de passage de paramètres et de saut de page dans une page Web à l'aide de JavaScript

Comment implémenter la fonction de passage de paramètres et de saut de page dans une page Web à l'aide de JavaScript

PHPzoriginal: 2023-04-25 18:19:541095parcourir

Avec le développement rapide d'Internet, de plus en plus de pages Web doivent transférer des informations d'une page à une autre. La méthode traditionnelle consiste à utiliser des requêtes GET ou POST, mais cette méthode nécessite une prise en charge côté serveur et ne peut pas accéder directement à la page. JavaScript implémente le transfert de paramètres de page Web et saute des pages sans prise en charge du serveur et peut accéder directement à la page cible.

1. Obtenez la valeur du paramètre

En JavaScript, vous pouvez obtenir la valeur du paramètre transmise lorsque vous accédez à la page via window.location.search. Par exemple, la page index.html passe à la page detail.html et une valeur de paramètre name=Tom est transmise. Vous pouvez utiliser le code suivant pour obtenir la valeur du paramètre transmise :

var search = window.location.search;
alert(search); // ?name=Tom

Si vous souhaitez obtenir le paramètre spécifique. valeur, vous devez rechercher. Pour le traitement, vous pouvez utiliser des expressions régulières ou des méthodes d'interception de chaînes. Voici le code qui utilise des expressions régulières pour obtenir la valeur du paramètre de nom :

var search = window.location.search;
var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
var result = search.substr(1).match(reg);
var name = result[2];
alert(name); // Tom

2. Transmettez les valeurs des paramètres

En JavaScript, vous pouvez utiliser window.location.href pour accéder à la page et transmettre la valeur du paramètre. Par exemple, pour accéder à la page detail.html à partir de la page index.html et passer une valeur de paramètre name=Tom, vous pouvez utiliser le code suivant :

var name = "Tom";
window.location.href = "detail.html?name=" + name;

3. Exemple complet

Ce qui suit est un exemple complet qui montre comment utiliser JavaScript Réaliser la page de saut des paramètres de page Web :

page index.html :

<!DOCTYPE html>
<html>
<head>
  <title>Index Page</title>
</head>
<body>
  <h1>Index Page</h1>
  <button onclick="gotoDetail()">Go to Detail Page</button>

  <script type="text/javascript">
    function gotoDetail() {
      var name = "Tom";
      window.location.href = "detail.html?name=" + name;
    }
  </script>
</body>
</html>

page detail.html :

<!DOCTYPE html>
<html>
<head>
  <title>Detail Page</title>
</head>
<body>
  <h1>Detail Page</h1>
  <p id="name"></p>

  <script type="text/javascript">
    window.onload = function() {
      var search = window.location.search;
      var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
      var result = search.substr(1).match(reg);
      var name = result[2];
      document.getElementById("name").innerHTML = "Hello, " + name + "!";
    }
  </script>
</body>
</html>

Sur la page index.html, il y a un bouton Cliquez sur le bouton pour accéder au détail. page html et transmettez-lui une valeur de paramètre name=Tom. Sur la page detail.html, récupérez la valeur du paramètre transmise via JavaScript et affichez-la sur la page.

Grâce aux exemples ci-dessus, nous pouvons voir que JavaScript est très simple à implémenter le transfert de paramètres de page Web et le saut de page. Il n'y a aucune restriction côté serveur et les fonctions de saut de page et de transfert de paramètres peuvent être réalisées. Dans le développement réel, davantage d'expansion et d'optimisation peuvent être effectuées en fonction de vos propres besoins.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment convertir des données en fichier exe en javascriptArticle suivant：Comment convertir des données en fichier exe en javascript

Articles Liés

Voir plus