在网上浏览时看到一些网站的URL使用#号后面传递一些字符作为参数,因为URL中#(井号)后的内容是不会被加入HTTP请求的,于是研究了一下,分享给大家。
URL:http://xxx.com/index.php?id=1#01234abcd
可以看出此处#后面的字符串作为一个标识使用,那么PHP(以PHP为例)端如何获取这个值呢?
其实PHP是不能直接获取这个值的!但是我们可以通过变通的方法来实现。常用的是通过JS把这个值设置到cookie里面,然后PHP就能访问这个cookie的数据了:
1 2 3 4 |
<pre class="inline:true decode:1 " ><span class="hljs-comment">//Javascript 代码</span> <span class="hljs-keyword">var</span> ss = <span class="hljs-built_in">window</span>.location.href.split(<span class="hljs-string">"#"</span>); <span class="hljs-built_in">document</span>.cookies = <span class="hljs-string">"ss="</span>+ss[<span class="hljs-number">1</span>]; |
然后在PHP中就可以使用 $_COOKIE[‘ss’] 取得这个值了。
1 2 3 4 5 6 7 8 9 |
<pre class="inline:true decode:1 " ><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">language</span>=<span class="hljs-string">"javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> ss =location.href.split(<span class="hljs-string">"#"</span>); <span class="hljs-built_in">document</span>.cookie=<span class="hljs-string">'ss='</span>+ss[<span class="hljs-number">1</span>]; <span class="hljs-keyword">if</span> (ss[<span class="hljs-number">1</span>] != <span class="hljs-string">"<?php echo $_COOKIE['ss']; ?>"</span>) { <span class="hljs-comment">//判断 cookie 是不是最新值,不是则重新载入页面</span> <span class="hljs-built_in">window</span>.location.reload(); } </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="php"><span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> $_COOKIE[<span class="hljs-string">'ss'</span>]; <span class="hljs-meta">?></span></span> |
这个方式有个缺点,就是设置cookie后需要重新载入,PHP端才会生效,对网速慢的用户体验犹为不佳。
另一个常用的场景是通过 JS 获取参数,根据值来从PHP端以 AJAX 方式获取数据显示出来。
如 URL:http://xxx.com/#news
1 2 3 4 5 6 7 8 9 10 |
<pre class="inline:true decode:1 " ><span class="hljs-comment">//location.hash 可获取URL里的#号和后面的部分</span> var <span class="hljs-keyword">mod</span> = location.hash; <span class="hljs-keyword">if</span>(<span class="hljs-keyword">mod</span> == <span class="hljs-string">"#news"</span>){ <span class="hljs-comment">//AJAX获取和处理最新数据</span> $.ajax(......); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-keyword">mod</span> == <span class="hljs-string">"#hots"</span>){ <span class="hljs-comment">//AJAX获取和处理热门数据</span> $.ajax(......); } |
第二种方式比较适合常见的AJAX应用
浏览量: 5