在不同的页面之间通过查询字符串传递信息
最近在做项目,遇到了两个页面之间如何传递信息,如何沟通的问题,困扰了我一段时间,今天在浏览其他的网站时,发现了一些网站使用在url后面以传递字符串的形式来传递信息,觉得很有意思,所以这里希望总结一下,并运用在项目中。
第一步:问题分析
在首页有这样一部分内容,当点击三个图片(或对应的文字)时,都会跳转到相同的页面,但是,我希望点击不同的模块, 在进入下一个页面时能显示不同的信息。
比如,我点击了中间的“企业办事”,我希望最终的效果如下所示:
即显示企业办事的相关内容。
问题: 后面的这个页面怎么才能知道用户在前面的页面点击了什么呢?
第二步: 使用demo进行测试
在同一个文件夹下建立两个文件: rememberState1.html 和 rememberState2.html 。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
希望实现的功能:当点击rememberState1.html中按钮时, rememberState2.html相应的部分显示。
问题查询:请教一下关于URL中的查询字符串 在segmentfault上我们可以看到类似的问题。
答案: 查询字符串的形式例如: https://www.baidu.com/?type=personal&name=zzw 其中?type=personal&name=zzw就是查询字符串, 在两个键值对之间我们需要使用&链接。将此url输入到浏览器地址栏中我们可以看到进入的仍是百度的界面。 查询字符串就是类似与ajax中get方法的查询字符串,可以向后台发送数据,至于怎么处理就与前端无关了。 但是我们可以利用这样的特点,在相应的页面通过js获得这个查询字符串以利用之。
问题解决思路: 当点击不同的按钮时,虽然我们都使其指向相同的页面,但是我们可以添加不同的查询字符串,并在后面的页面获取相应的查询字符串然后利用之。
设置如下所示:
<a href="rememberState2.html?type=1" class="first">链接1</a> <a href="rememberState2.html?type=2" class="second">链接2</a> <a href="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可以发现,完成这样的功能并不困难,只要我们主动思考,勤于解决问题就可以了。