页面跳转并数据传递-不同页面的传递数据

最新推荐文章于 2024-07-25 11:00:49 发布

一夕ξ

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量4.7k

点赞数 2

分类专栏：前端学习文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_45387575/article/details/123253021

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

1、第一个登录页面，里面有提交表单，action提交到index页面

2、第二个页面，可以使用第一个页面的参数，实现一个数据不同页面之间的传递效果

3、第二个页面之所以可以使用第一个页面的数据，就是利用了URL里面的location.search参数

4、第二个页面提取参数

5、去掉？

6、分隔符分开

表单form：可以将内容提交到另外一个页面上

输入页面：

<!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>
        select {
            width: 100px
        }
    </style>
</head>

<body>
    <p>登录页面</p>
    用户名：
    <form action="file:///D:/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80-HTML/%E6%A1%88%E4%BE%8B/JS3/12-index.html
    ">  
    <!-- 提交的action位置 -->
    <!-- 注意表单的name一定不能落下，有了name之后才能提交 -->
     <select name="uname" id=""><option >andy</option><option >emy</option><option >yumi</option><option >zetr</option>
    </select>
        <input type="submit" value="登录"></form>

    <script>
        //获取btn
        var btn = document.querySelector('input')
            //当btn点击的时候页面跳转
        btn.addEventListener('click', function() {
            //修改URL对象属性
            location.href = 'file:///D:/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80-HTML/%E6%A1%88%E4%BE%8B/JS3/12-index.html'
        })
    </script>
</body>

</html>

登录页面：

    <p>首页</p>
    <div></div>
    <script>
        console.log(location.search) //得到?uname=  
            //1、去掉？ substr('起始位置',截取几个字符)
        var params = location.search.substr('1', ) //第二个参数省略，默认截到最后一个字符
            //用分隔符分隔 split将字符串分隔成数组
        var arr = params.split('=') //因为其中的参数用=进行分隔
        var div = document.querySelector('div')
        div.innerHTML = arr[1] + '欢迎您'
//第一个页面输入中文的话会乱码
        //怎么把登录页面select里面的值拿过来
    </script>

一夕ξ

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面跳转并数据传递-不同页面的传递数据

1、第一个登录页面，里面有提交表单，action提交到index页面2、第二个页面，可以使用第一个页面的参数，实现一个数据不同页面之间的传递效果3、第二个页面之所以可以使用第一个页面的数据，就是利用了URL里面的location.search参数4、第二个页面提取参数5、去掉？6、分隔符分开表单form：可以将内容提交到另外一个页面上输入页面：<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫