How to implement the function of passing parameters and jumping pages in a web page using JavaScript-Front-end Q&A-php.cn

How to implement the function of passing parameters and jumping pages in a web page using JavaScript

PHPz

Release： 2023-04-25 18:52:02

Original

1156 people have browsed it

With the rapid development of the Internet, more and more web pages need to transfer information from one page to another. The traditional method is to use GET or POST requests, but this method requires server-side support and cannot directly jump to the page. JavaScript implements web page parameter transfer and jump pages without server support and can jump directly to the target page.

1. Get the parameter value

In JavaScript, you can get the parameter value passed when jumping to the page through window.location.search. For example, if the index.html page jumps to the detail.html page, and a parameter value name=Tom is passed, you can use the following code to get the passed parameter value:

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

Copy after login

If you want to get the specific parameter value, If you need to process the search, you can use regular expressions or string interception methods. The following is the code that uses regular expressions to obtain the name parameter value:

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

Copy after login

2. Pass parameter value

In JavaScript, you can use window.location.href to achieve page jump and pass parameters value. For example, to jump to the detail.html page from the index.html page and pass a parameter value name=Tom, you can use the following code:

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

Copy after login

3. Complete example

The following is a complete example The example shows how to use JavaScript to implement web page parameter jump page:

index.html page:

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

Copy after login

detail.html page:

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

Copy after login

in index.html On the page, there is a button. Clicking the button can jump to the detail.html page, and a parameter value name=Tom is passed. On the detail.html page, get the passed parameter value through JavaScript and display it on the page.

Through the above examples, we can see that JavaScript is very simple to implement web page parameter jump page, there are no server-side restrictions, and the functions of page jump and parameter transfer can be realized. In actual development, more expansion and optimization can be carried out according to your own needs.

The above is the detailed content of How to implement the function of passing parameters and jumping pages in a web page using JavaScript. For more information, please follow other related articles on the PHP Chinese website!