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

比如说，有两个页面，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. 重装系统后激活win10和office2016

    激活win10: 重装的版本和电脑刚买来是的系统一样的话直接联网,过一段时间就会自动激活.如果不一样可以下载Kms工具激活. 激活office2016: 在开始菜单里双击“我的Office”,登录账号 ...

  2. 网站如何使用https

    阿里云提供了免费的证书, 先去申请免费的https证书 https://common-buy.aliyun.com/?spm=5176.10695662.958455.3.1f0c7d54HhNTG4 ...

  3. Lavavel5.5源代码 - 限流工具

    app('redis')->connection('default')->throttle('key000') // 每60秒,只能有10个资源被获取,在3秒内获取不到锁抛出异常 -> ...

  4. python 用装饰器写登录

    # 1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件), # 要求登录成功一次,后续的函数都无需再输入用户名和密码 # FLAG = False # def login(func): ...

  5. THINKPHP网站漏洞怎么修复解决

    THINKPHP漏洞修复,官方于近日,对现有的thinkphp5.0到5.1所有版本进行了升级,以及补丁更新,这次更新主要是进行了一些漏洞修复,最严重的就是之前存在的SQL注入漏洞,以及远程代码执行查 ...

  6. Apache Struts最新漏洞 远程代码执行漏洞预警 2018年11月08日

    2018年11月8日,SINE安全监控检测中心,检测到Apache Struts官方更新了一个Struts漏洞补丁,这个漏洞是Apache Struts目前最新的漏洞,影响范围较广,低于Apache ...

  7. 2-Linux C语言指针与内存-学习笔记

    Linux C语言指针与内存 前面我们对于: c语言的基本用法 makeFile文件的使用 main函数的详解 标准输入输出流以及错误流管道 工具与原理 指针与内存都是c语言中的要点与难点 指针 数组 ...

  8. R语言学习笔记（六）： 列表及数据框的访问

    List R语言中各组件的名称叫做标签(tags),访问列表有3种方法: j$salary 通过标签名字访问,只要不引起歧义,可以只写出前几个字母. j[['sal']] 夹在两个中括号时引号里的标签 ...

  9. POJ1236_A - Network of Schools _强连通分量::Tarjan算法

    Time Limit: 1000MS   Memory Limit: 10000K Description A number of schools are connected to a compute ...

  10. Java基础——内部类

    一.什么是内部类 将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类 内部类所在的类在编译成功后,会出现这样两个class文件:OuterClass.class和OuterClass$In ...