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

比如说，有两个页面，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. Jensen 不等式

    若f(x)为区间I上的下凸(上凸)函数,则对于任意xi∈I和满足∑λi=1的λi>0(i=1,2,...,n),成立: \[f(\sum ^{n} _{i=1} \lambda _{i}x_{i ...

  2. BZOJ1607: [Usaco2008 Dec]Patting Heads 轻拍牛头(模拟 调和级数)

    Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 3031  Solved: 1596[Submit][Status][Discuss] Descriptio ...

  3. python 之函数

    一 函数的定义:对功能和动作的封装和定义.二 函数的格式:def 函数名(形参列表): 函数名就是变量名:规则就是变量的规则 函数体(return) ret = 函数名(实参列表)三 函数的返回值:函 ...

  4. 洛谷 T51922 父子

    题目描述 对于全国各大大学的男生寝室,总是有各种混乱的父子关系. 那么假设现在我们一个男生寝室有不同的 nn 个人,每个人都至多有一个“爸爸”,可以有多个“儿子”,且有且只有一个人没有“爸爸”(毕竟是 ...

  5. 虚拟机服务没有启动的 CentOS 和 Ubuntu 无法上网

    测试用 vmware 安装 OSX,安装补丁时要停止 vmware 的服务.如下图: 结果忘记启动了,导致 centos\ubuntu 等所有虚拟机都无法上网...所有的 启动这四个服务后,一切恢复正 ...

  6. ELK 分布式日志实战

    一.  ELK 分布式日志实战介绍 此实战方案以 Elk 5.5.2 版本为准,分布式日志将以下图分布进行安装部署以及配置. 当Elk需监控应用日志时,需在应用部署所在的服务器中,安装Filebeat ...

  7. elasticsearch搜索引擎搭建

    在该路径下,运行elasticsearch.bat该命令,后面访问127.0.0.1:9200 出现如下界面说明启动成功 elasticsearch-head操作elasticsearch的图形界面, ...

  8. JAVA 基础编程练习题

    1 [程序 1 不死神兔] 题目:古典问题:有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少?程序分析: 兔子的规 ...

  9. [BZOJ1040][ZJOI2008]骑士(树形DP)

    对于一个联通块内,有且只有一个环,即n个点n条边 那么找到那个环,然后任意断一条边,这个联通块就变成一棵树了,然后做树形DP就行了 对于断的边要记录下来DP时特判 Code #include < ...

  10. 常用操作提高效率 之 for 与in

    问题如何而来: 对于刚参加工作的我  批量删除数据通常采用的是前端传递到后台一个对象的id字符串  通过逗号分隔的多个id  或者收的直接是一个id数组 两个原理一样第一个后台要在次使用split(& ...