正文

如何用JavaScript实现页面跳转并传递参数？实战案例分析及代码详解

/0 浏览量
0610

在Web开发中，经常需要实现页面之间的跳转，并携带一些参数。JavaScript提供了多种方式来实现这一功能。下面，我们将通过一个实战案例来详细介绍如何使用JavaScript实现页面跳转并传递参数。

案例背景

假设我们有一个网站，用户点击一个按钮后，我们需要跳转到另一个页面，并在新页面上显示用户在点击按钮时选择的某个值。

实现步骤

1. 创建页面

首先，我们需要创建两个页面，一个是跳转的页面（我们称它为target.html），另一个是接收参数并显示的页面（我们称它为display.html）。

target.html 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳转页面</title>
</head>
<body>
    <button id="jumpButton">跳转到展示页面</button>
    <script src="script.js"></script>
</body>
</html>

display.html 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示页面</title>
</head>
<body>
    <h1>欢迎来到展示页面</h1>
    <p id="displayValue">用户选择的值：</p>
    <script src="display.js"></script>
</body>
</html>

2. 编写JavaScript代码

在target.html中，我们需要编写JavaScript代码来实现点击按钮后跳转到display.html，并传递参数。

script.js 示例代码：

document.getElementById('jumpButton').addEventListener('click', function() {
    var selectedValue = '用户选择的数据'; // 可以根据实际情况获取数据
    window.location.href = 'display.html?value=' + encodeURIComponent(selectedValue);
});

3. 接收参数并显示

在display.html中，我们需要编写JavaScript代码来接收URL参数，并在页面上显示。

display.js 示例代码：

window.onload = function() {
    var queryParams = new URLSearchParams(window.location.search);
    var value = queryParams.get('value');
    document.getElementById('displayValue').textContent = '用户选择的值：' + value;
};

代码详解

URL编码

在JavaScript中，当将参数添加到URL时，需要使用encodeURIComponent函数对参数值进行URL编码，以避免特殊字符导致的问题。

URL解析

在display.html中，我们使用了URLSearchParams对象来解析URL中的查询字符串，并获取参数值。

页面跳转

在target.html中，我们使用window.location.href属性来改变浏览器的地址，实现页面跳转。

总结

通过上述实战案例，我们学习了如何使用JavaScript实现页面跳转并传递参数。在实际开发中，这种方法非常实用，可以帮助我们实现复杂的页面交互效果。

-- 展开阅读全文 --