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

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

page1.html的代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>页面1</title>

     <style>

      *{

          margin: 0;

          padding: 0;

      }

     </style>

 </head>

 <body>

 <a href="index2.html#id1">跳转到box1地方</a>

 <a href="index2.html#id2">跳转到box2地方</a>

 </body>

 <script>

     window.onload = function(){

     }

 </script>

 </html>

page2.html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>页面2</title>

     <style>

         #id1{

             width: 100px;

             height: 100px;

             background: red;

         }

         #id2{

             width: 100px;

             height: 100px;

             background: pink;

         }

     </style>

 </head>

 <body>

     <div id="id1">box1</div>

     <div style="width: 10px;height: 10px;margin-bottom: 1000px;"></div>

     <div id="id2">box2</div>

 </body>

 <script>

     window.onload = function () {

         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，井号后面的为传递的参数，需要进行处理一下

         //首先要获取当前的href值

         let url = window.location.href.split('#');

         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']  数组的第二个就是我们传递的数据

         function goHash(hash) {

             if( hash == 'id1' ){

                 console.log('打印出id1');//次处会打印出id1

             }else if ( hash == 'id2' ){

                 console.log('打印出id2');//此处会打印出id2

             }

         }

         goHash(url[1]);

     }

 </script>

 </html>

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

用js通过url传参把数据从一个页面传到另一个页面的更多相关文章

  1. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

  2. jspsmartupload 文件上传让input数据和文件上传同时提交

    一.使用原因: 文件上传时,表单的属性中必须要有multipart/form-data,如以下例子: <form name="form_post" class="a ...

  3. JS分析URL字符串，取得参数名，AJAX传参请求代码示例

    //当前页面URL中参数分析函数,正则校验 function getQueryString(name) { var reg = new RegExp("(^|&)" + n ...

  4. apiCloud中api.ajax方法跨域传参获取数据

    apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...

  5. Asp.Net中ObjectDataSource控件传参绑定数据

    最近在实习,在上头交付的任务中,由于需要使用Asp.Net的ListView控件,因此必然得就使用了ObjectDataSource控件,由于在使用过程中,需要网页中的参数发送到后台后,运行该参数进行 ...

  6. 页面ajax请求传参及java后端数据接收

    js ajax请求传参及java后端数据接收 Controller: package com.ysl.PassingParameters.controller; import java.util.Li ...

  7. url传参及重定向

    成功跳转$this -> success('提示语',跳转路径,返回的数据,时间,发送的 Header 信息)跳转失败$this -> error('提示语',跳转路径,返回的数据,时间, ...

  8. SpringMVC前后端分离交互传参详细教程

    温故而知新,本文为一时兴起写出,如有错误还请指正 本文后台基于SpringBoot2.5.6编写,前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试,用于理解前后端分离式开发的交互 ...

  9. ui-router多视图+嵌套视图+传参综合练习

    ui-router多视图:页面上存在的多个ui-view,它们以名字区分: 嵌套视图:一个ui-view的一个状态下对应了一个html,这个html里面又有一个ui-view. 视图之间传参:用ui. ...

随机推荐

  1. php第五节（字符串函数和时间、日期函数）

    <?php //查找字符串函数 // strpos() 查找字符第一次出现的位置 重点区分大小写 //stripos — 查找字符串首次出现的位置(不区分大小写) //strrpos — 计算指 ...

  2. 【2018 CCPC网络赛 1004】Find Integer（勾股数+费马大定理）

    Problem Description people in USSS love math very much, and there is a famous math problem . give yo ...

  3. Java中抽象类与接口的比较

    一.基本概念 抽象类:表示这个对象是什么:比如 男人.女人这两个类,他们的抽象类是人,说明男人.女人是人: 接口:表示这个对象能做什么:比如人可以吃东西,狗也可以吃东西,将“吃东西”定义为一个接口,让 ...

  4. （转）Maven POM中的各种scope的行为总结

    原地址:https://blog.csdn.net/cnweike/article/details/52221410 compile:默认的scope.任何定义在compile scope下的依赖将会 ...

  5. css实现未知元素宽高垂直居中和水平居中的方法

    第一种:display:table-cell的方式 .container { /*父级容器*/ display:table-cell; text-align:center; vertical-alig ...

  6. docker理论基础

    Namespaces 命名空间(namespaces)是 Linux 为我们提供的用于分离进程树.网络接口.挂载点以及进程间通信等资源的方法.在日常使用 Linux 或者 macOS 时,我们并没有运 ...

  7. docker和docker compose常用操作命令

    首先区分一下docker中几个概念 Image:镜像,相当于一个root文件系统,不包含任何动态数据 Container:容器,镜像运行时的实体,实质是进程,容器进程运行于属于自己的独立的命名空间 d ...

  8. 分享一个根据具体的日期判断星座的PHP函数

    其实原理很简单,也就是把所有的星座月份日期范围存储到一个数组中,然后根据日期判断属于哪个范围,这样就得到是哪个星座了. 下面的这个函数写的比较精炼,可以参考一下 function constellat ...

  9. python2.7练习小例子（七）

        7):题目:将一个列表的数据复制到另一个列表中.     程序分析:使用列表[:].     程序源代码: #!/usr/bin/python # -*- coding: UTF-8 -*- ...

  10. git删除本地及远程分支

    1. 删除本地分支: git branch -d branchName 2. 删除远程分支: // 方法一:将删除的本地分支推到远程(要删除的远程分支在本地有映射) git push origin : ...