首页 > 代码库 > 在不同的页面之间通过查询字符串传递信息

在不同的页面之间通过查询字符串传递信息

  最近在做项目,遇到了两个页面之间如何传递信息,如何沟通的问题,困扰了我一段时间,今天在浏览其他的网站时,发现了一些网站使用在url后面以传递字符串的形式来传递信息,觉得很有意思,所以这里希望总结一下,并运用在项目中。

第一步:问题分析

  技术分享

  在首页有这样一部分内容,当点击三个图片(或对应的文字)时,都会跳转到相同的页面,但是,我希望点击不同的模块, 在进入下一个页面时能显示不同的信息。

  比如,我点击了中间的“企业办事”,我希望最终的效果如下所示:

   技术分享

  即显示企业办事的相关内容。

  问题: 后面的这个页面怎么才能知道用户在前面的页面点击了什么呢?

 

第二步: 使用demo进行测试

  在同一个文件夹下建立两个文件: rememberState1.html 和 rememberState2.html 。

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>rememberState1</title>    <style>        * {            margin: 0;            padding: 0;        }        a {            display: inline-block;            width: 100px;            height: 50px;            line-height: 50px;            text-align: center;            border: thin solid blue;            text-decoration: none;        }    </style></head><body>    <a href=http://www.mamicode.com/"rememberState2.html" class="first">链接1</a>    <a href=http://www.mamicode.com/"rememberState2.html" class="second">链接2</a>    <a href=http://www.mamicode.com/"rememberState2.html" class="third">链接3</a></body></html>
View Code
技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>rememberState2</title>    <style>        * {            margin: 0;            padding: 0;        }        div {            padding: 10px 15px;            border: thin solid blue;            margin:10px 20px 0 10px;        }    </style></head><body>    <div class="firstDiv">链接1被点击时显示</div>    <div class="secondDiv">链接2被点击时显示</div>    <div class="thirdDiv">链接3被点击时显示</div></body></html>
View Code

  希望实现的功能:当点击rememberState1.html中按钮时, rememberState2.html相应的部分显示。

  

  问题查询:请教一下关于URL中的查询字符串  在segmentfault上我们可以看到类似的问题。

  答案: 查询字符串的形式例如: https://www.baidu.com/?type=personal&name=zzw  其中?type=personal&name=zzw就是查询字符串, 在两个键值对之间我们需要使用&链接。将此url输入到浏览器地址栏中我们可以看到进入的仍是百度的界面。 查询字符串就是类似与ajax中get方法的查询字符串,可以向后台发送数据,至于怎么处理就与前端无关了。 但是我们可以利用这样的特点,在相应的页面通过js获得这个查询字符串以利用之。

  问题解决思路: 当点击不同的按钮时,虽然我们都使其指向相同的页面,但是我们可以添加不同的查询字符串,并在后面的页面获取相应的查询字符串然后利用之。

  设置如下所示:

    <a href=http://www.mamicode.com/"rememberState2.html?type=1" class="first">链接1</a>    <a href=http://www.mamicode.com/"rememberState2.html?type=2" class="second">链接2</a>    <a href=http://www.mamicode.com/"rememberState2.html?type=3" class="third">链接3</a>

  当我们点击不同的按钮时,可以发现传入的url是不同的(查询字符串不同)。

  技术分享

   ok! 第一步也是非常重要的一步工作完成了,接下来就是在第二个页面如何获取这些有用的数据啦!

  

   思路: 我们可以通过window.location.search属性得到当前页面的查询字符串,然后再利用处理字符串的方法得到其中不同之处即可(1 or 2 or 3)。 

     即window.location.search.replace("?type=", "");即可得到上一个页面点击的是第一个a(1) 、第二个a(2) 还是第三个a(3) 。

  然后再根据不同的值显示或隐藏响应的内容,默认是第一个显示。那么 rememberState2.html的代码可以如下所示:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>rememberState2</title>    <style>        * {            margin: 0;            padding: 0;        }        div {            padding: 10px 15px;            border: thin solid blue;            margin:10px 20px 0 10px;            display: none;        }        .show {            display: block;        }    </style></head><body>    <div class="firstDiv">链接1被点击时显示</div>    <div class="secondDiv">链接2被点击时显示</div>    <div class="thirdDiv">链接3被点击时显示</div>    <script>      var typeNumber = window.location.search.replace("?type=", "");      if (typeNumber === "" || typeNumber === "1") {        document.querySelector(".firstDiv").className += " show";              } else if (typeNumber === "2") {        document.querySelector(".secondDiv").className += " show";              } else if (typeNumber === "3") {        document.querySelector(".thirdDiv").className += " show";              }    </script></body></html>

  注:因为typeNumber是string,所以上面的命名使用typeString更为合适!   

 最终效果如下所示:

技术分享

  第三步: 将demo中使用的方法应用到项目中去

   我所举得例子就是和项目中的使用场景非常相似, 通过上面demo的练习,我很快就可以将上述方法运用到项目中去, 最终的效果如下所示:

      技术分享

 

 

 

 

  第四步:总结

  通过上面的demo可以发现,完成这样的功能并不困难,只要我们主动思考,勤于解决问题就可以了。

 

 

  

在不同的页面之间通过查询字符串传递信息