用js通过url传参把数据从一个页面传到另一个页面

Posted 上善若水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用js通过url传参把数据从一个页面传到另一个页面相关的知识,希望对你有一定的参考价值。

好长时间没写博客了,时值五一,外面到处人山人海,本宝宝还是好好呆在家学习吧。好了,言归正传。在没有后台支持的情况下,如何实现从一个页面像另一个页面来传递数据呢?应该很多人遇到过这个问题吧。那我就来说说我在项目中遇到的时候是如何解决的。

比如说,有两个页面,page1.html,和page2.html,在page1页面向page2页面传递数据可以通过hash值。上代码:

page1.html的代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>页面1</title>
 6     <style>
 7      *{
 8          margin: 0;
 9          padding: 0;
10      }
11     </style>
12 </head>
13 <body>
14 <a href="index2.html#id1">跳转到box1地方</a>
15 <a href="index2.html#id2">跳转到box2地方</a>
16 
17 </body>
18 <script>
19     window.onload = function(){
20     }
21 </script>
22 </html>

page2.html代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>页面2</title>
 6     <style>
 7         #id1{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11         }
12 
13         #id2{
14             width: 100px;
15             height: 100px;
16             background: pink;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="id1">box1</div>
22     <div style="width: 10px;height: 10px;margin-bottom: 1000px;"></div>
23     <div id="id2">box2</div>
24 </body>
25 <script>
26     window.onload = function () {
27         console.log(window.location.href)//此处会打印出当前页面的href值,为http://localhost:63342/HTML_ExamplePractice/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%8F%90%E5%89%8D%E7%BB%83%E4%B9%A0/index2.html#id1,井号后面的为传递的参数,需要进行处理一下
28         //首先要获取当前的href值
29         let url = window.location.href.split(#);
30         console.log(url);//打印出来是一个数组[‘http://localhost:63342/HTML_ExamplePractice/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%8F%90%E5%89%8D%E7%BB%83%E4%B9%A0/index2.html’,‘id1‘]  数组的第二个就是我们传递的数据
31 
32 
33         function goHash(hash) {
34             if( hash == id1 ){
35                 console.log(打印出id1);//次处会打印出id1
36 
37             }else if ( hash == id2 ){
38                 console.log(打印出id2);//此处会打印出id2
39             }
40         }
41         goHash(url[1]);
42     }
43 </script>
44 </html>

当在page1页面中点击某一个a标签的时候,会跳转到page2页面,然后通过获取当前的href值,可以获得我们要传递的数据,后期经过处理之后加以利用。用到的知识点是hash值和锚点。。

以上是关于用js通过url传参把数据从一个页面传到另一个页面的主要内容,如果未能解决你的问题,请参考以下文章

JQuery可以获取从另一个页面传过来的值吗

将一个JSP页面的若干个值传到另一个JSP页面上

html如何将一个页面的值应用在另一个页面?

将数据从页面传递到另一个页面

jsp中select值如何从数据库中取出然后,传到另一个jsp页面?

三大框架子组件向父组件传值