Home > Article > Web Front-end > How to implement the function of passing parameters and jumping pages in a web page using JavaScript
How to implement the function of passing parameters and jumping pages in a web page using JavaScript
- PHPzOriginal
- 2023-04-25 18:19:541095browse
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
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
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;
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>
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>
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!