HTML页面之间如何传递数据，超简单，一看就会！

最新推荐文章于 2023-06-28 14:34:07 发布

小苏(º﹃º )

最新推荐文章于 2023-06-28 14:34:07 发布

阅读量2.2w

点赞数 43

分类专栏： HTML 文章标签： css javascript html css3

本文链接：https://blog.csdn.net/qq_45850095/article/details/117758342

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML页面之间的数据传递

- 1.通过window.location.href发送，location.search接收
- 2.通过window.location.open()发送

1.很多小伙伴在做页面时，有没有想过两个页面之间如何在跳转的同时，还能够传递一些数据过去
2.跳转页面时，我们首先想到的是利用a标签进行跳转。
3.一般我们通过a标签的方式只能进行页面之间的跳转，而无法将想要的数据传递过去。
4.接下来将讲解两个页面之间如何进行数据的传递。

1.通过window.location.href发送，location.search接收

1这里我们一般将window.location.href绑定在点击事件上进行跳转，它类似于a标签，但是可以传递参数。
01.html页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: aquamarine;
        }
    </style>
</head>
<body>
	<h1 style="text-align: center;">01.html</h1>
    <button>点击我跳转</button>
</body>
<script>
    let button=document.getElementsByTagName("button")[0]
    button.onclick=function(){
        //路径+参数名+参数值
        window.location.href = './02.html?'+'uname='+'zhangsan'
        //2.下面这种方式将数据进行编码，可以传递中文不出现乱码，推荐
        // window.location.href = encodeURI('./02.html?uname=哈哈');
    }
</script>
</html>

1这里我们利用location.search来接收数据

02.html页面代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: aquamarine;
        }
    </style>
</head>

<body>
	<h1 style="text-align: center;">02.html</h1>
    <button>点击我，弹出接收信息</button>
</body>
<script>
    var name = location.search;
    // var name = decodeURI(document.URL)//获取到编码的数据并进行解码，推荐
    //获取到的数据其实是  ?uname=zhangsan'
    //下面是对数据进行处理
    name=name.slice(name.indexOf("=")+1)
    console.log(name);
    var button = document.querySelector("button");
    button.onclick = function () {
        alert(name)
    }
</script>

</html>

效果如下：
在这里插入图片描述

2.通过window.location.open()发送

如果是希望打开一个新页面，而不是改变当前的页面，那么window.location.href就不适用了，此时，我们需要借助于window.open()来实现，它是用来打开一个新的浏览器窗口或查找一个已命名的窗口。

window open()用法
01.html页面代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background-color: aquamarine;
        }
    </style>
</head>
<body>
	<h1 style="text-align: center;">01.html</h1>
    <button>点击我跳转</button>
</body>
<script>
    let button=document.getElementsByTagName("button")[0]
    button.onclick=function(){
        //路径+参数名+参数值  使用encodeURI进行编码，可以传中文
        window.open(encodeURI('./02.html?'+'uname='+'哈哈哈'))
    }
</script>
</html>

02.html页面代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: aquamarine;
        }
    </style>
</head>

<body>
	<h1 style="text-align: center;">02.html</h1>
    <button>点击我，弹出接收信息</button>
</body>
<script>
    //对数据进行解码
    var name= decodeURI(document.URL)
    //获取到的数据其实是  ?uname=哈哈哈'
    //下面是对数据进行处理
    name=name.slice(name.indexOf("=")+1)
    var button = document.querySelector("button");
    button.onclick = function () {
        alert(name)
    }
</script>
</html>