当前位置：首页 > 行业动态 > 正文

html中如何跳转页面跳转页面传值

admin
行业动态
2024-03-21
2

在HTML中，我们可以通过超链接（a标签）实现页面跳转，我们还可以通过URL参数的方式在页面之间传递值，以下是详细的技术教学：

1、创建两个HTML文件

我们需要创建两个HTML文件，分别为index.html和target.html。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>首页</h1>
    <a href="target.html?name=张三&age=25">点击跳转到目标页面</a>
</body>
</html>

target.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>目标页面</title>
</head>
<body>
    <h1>目标页面</h1>
    <p id="info"></p>
    <script src="script.js"></script>
</body>
</html>

2、使用JavaScript获取URL参数并显示在页面上

为了在目标页面显示从首页传递过来的值，我们需要使用JavaScript来获取URL参数，并将其显示在页面上，创建一个名为script.js的JavaScript文件，并将以下代码添加到其中：

// 获取URL参数
function getQueryVariable(variable) {
    const query = window.location.search.substring(1);
    const vars = query.split('&');
    for (let i = 0; i < vars.length; i++) {
        const pair = vars[i].split('=');
        if (pair[0] === variable) {
            return pair[1];
        }
    }
    return false;
}
// 显示URL参数值
document.getElementById('info').innerHTML = 姓名：${getQueryVariable('name')}，年龄：${getQueryVariable('age')};

3、运行示例

将index.html、target.html和script.js这三个文件放在同一个文件夹中，用浏览器打开index.html文件，点击“点击跳转到目标页面”的超链接，将会跳转到target.html页面，并在页面上显示从首页传递过来的值。

通过以上步骤，我们实现了在HTML中通过超链接跳转页面并传递值的功能，需要注意的是，这种方法只适用于GET请求，因为URL参数会附加在URL后面，如果需要传递敏感信息，建议使用POST请求。