Comment implémenter la fonction de passage de paramètres et de saut de page dans une page Web à l'aide de JavaScript-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-25 18:52:02

original

1072 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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